nuxt 에서 vuex-persistedstate 사용하기 > IT 기술백서

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]

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤