VueX 및 NuxtJ의 지속 상태s

VueX 및 NuxtJ의 지속 상태s

브라우저의 데이터 상태를 유지하기 위해 vuex-http://https://github.com/robinvdvleuten/vuex-persistedstate)를 사용합니다.

Adonuxt(NuxtJs와 Adonis의 혼재)를 사용하고 있습니다.JS)

VueX 액션에서는 다음 액션이 있습니다.

nuxtClientInit ({commit}) {
      // I want get here state auth saved by persistedstate package
    }

이 액션은 플러그인으로 호출됩니다.

로컬 스토리지js

export default async (context) => {
  await context.store.dispatch('nuxtClientInit', context)
}

nuxt.influgin 플러그인(config)

{
      src: '~/plugins/localstorage.js',
      ssr: false
    }

사용자 토큰을 사용하여 Axios를 구성하는 상태를 가져옵니다.

this.$axios.setToken(auth.jwt.token, 'Bearer')

nuxtClientInit()는 persistedstate 패키지보다 먼저 호출되는 것 같습니다.state.auth는 늘이지만 콘솔에서 확인할 수 있습니다.

Vuex의 데이터를 유지하기 위해 https://www.npmjs.com/package/vuex-persist을 사용했습니다.

csr+cookie

아래 라이브러리 중 하나를 선택할 수 있습니다.

1 . vuex - statestate스테이트

2 . vuex - displayed

vuex-instate 사용 현황

https://www.npmjs.com/package/vuex-persistedstate

플러그 인/크리스테이트.js

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({store, req, isDev}) => {
  createPersistedState({
      key: 'your_key',
      paths: ['state1', 'state2',...so_on],
      storage: {
        getItem: (key) => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
        setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: !isDev }),
        removeItem: (key) => Cookies.remove(key)
      }
  })(store)
}

nuxt.config.config.syslog

  plugins: [
      { src: '~plugins/persistedstate.js' }
    ]

vuex의 매개에 의한

https://www.npmjs.com/package/vuex-persist

// ~/plugins/vuex-persist.js
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

import VuexPersistence from 'vuex-persist'

export default ({ store, req, isDev }) => {
  new VuexPersistence({
    key:'test',
    reducer: (state) => ({}),
    restoreState: (key, storage) =>process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
    saveState: (key, state, storage) =>
    Cookies.set(key, value, { expires: 365, secure: !isDev }),

  }).plugin(store);
}

nuxt.config.config.syslog

 plugins: [
      { src: '~plugins/vuex-persist.js' }
    ]

제 경우 디렉토리를 잘못 지정했습니다.

root/
　├ src/
　├ pages/
     .
     .
　├ src/
　 　└ plugins/
　 　　　└ localstorage.js/

위 디렉토리에서 다음과 같이 지정해야 합니다.

nuxt.config.js의 경우

{src:'~/src/plugins/localstorage.js', srr: false}

언급URL : https://stackoverflow.com/questions/49454604/persisted-state-from-vuex-and-nuxtjs