vuex-persistedState 를 통한 쿠키 관리

강참치·2022년 10월 17일
0

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'}]]
}
profile
참치입니다

1개의 댓글

comment-user-thumbnail
2022년 10월 18일
답글 달기