store정보가 새로고침시 날라간다.
따라서 쿠키를 통해 서버단에서 관리 필요를 느꼈다
vuex-persistedState 를 통해 store , state 정보를
cookie 로 관리하려한다
아래가 간단한 예제 코드이다
vuex-persistedState.js
import createPersistedState from 'vuex-persistedstate'
import cookie from 'cookie'
export default ({store, $cookies, req}) => {
createPersistedState({
key: 'testCookie', // 쿠키 키 이름
paths: ['test'], // 저장할 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)
}
store/test.js
export const state = () => ({
val: 0
})
export const mutations = {
increment(state) {
state.val++
}
}
front page/index.vue
<template>
<article>
<div @click="test">test</div>
<div @click="testcookie">testcookie</div>
</article>
</template>
<script>
export default {
methods: {
test() {
this.$store.commit('test/increment')
},
testcookie() {
const val = this.$cookies.get('testCookie')
console.log(val)
}
}
}
</script>
<style></style>
nuxt.config.js
export default {
plugins: ['~/plugins/vuex-persistedState'],
modules: ['cookie-universal-nuxt', ['cookie-universal-nuxt', {alias: 'cookiz'}]]
}
참조 : https://hacktam.kr/etclec/221