ssr 쪽에서는 localStorage 를 사용할 수 없기 때문에 cookie 를 이용한다.
클라이언트쪽에서 페이지를 요청할때 헤더에 쿠키가 실려가기 때문에 ssr서버측에서는 이를 파싱하여 사용한다.
쿠키 플러그인은 ‘cookie-universal-nuxt’ 를 사용하였다.
/plugins/persistedState.js
[code]
import createPersistedState from ‘vuex-persistedstate’
import cookie from ‘cookie’
export default ({ store, $cookies, req }) => {
createPersistedState({
key: ‘mystore’, // 쿠키 키 이름
paths: [‘mymodule.user’], // 저장할 state
storage: {
getItem: (key) => {
if (process.server) {
if (!(typeof req.headers.cookie === ‘string’)) return
const parsedCookies = cookie.parse(req.headers.cookie)
return parsedCookies[key]
} else {
return $cookies.set(key)
}
},
setItem: (key, value) => {
$cookies.set(key, value)
},
removeItem: (key) => $cookies.remove(key),
},
})(store)
}
[/code]
nuxt.config.js
[code]
plugins: [
{ src: ‘~/plugins/persistedState.js’ },
],
modules: [
‘cookie-universal-nuxt’,
[‘cookie-universal-nuxt’, { alias: ‘cookiz’ }],
]
[/code]
