来自 VueX 和 NuxtJS 的持久化状态

Question

我使用 vuex-persistedstate 包 (https://github.com/robinvdvleuten/vuex-persistedstate) 在浏览器上持久化数据状态。

我使用 Adonuxt（NuxtJS 和 AdonisJS 的混合体）。

在 VueX 动作中，我有这个动作：

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

此操作由插件调用：

localstorage.js

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

nuxt.js 插件（配置）

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

我想要获取状态以使用用户令牌配置 Axios：

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

我的印象是 nuxtClientInit() 在 persistedstate 包之前被调用，所以 state.auth 为 null 但它可以在控制台中观察到：

Answer 1

我已经使用 https://www.npmjs.com/package/vuex-persist 从 Vuex 持久化数据。

Answer 2

就我而言，我在指定目录时犯了一个错误。

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

在上述目录中，您必须指定如下。

在nuxt.config.js

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

Answer 3

csr+ssr cookie

您可以选择以下任何一个库

1.vuex-persistedstate

2.vuex-persist

vuex-persistedstate 用法

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

plugins/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.js

  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.js

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

来自 VueX 和 NuxtJS 的持久化状态

Persisted state from VueX and NuxtJS

vuex

nuxt.js

adonis.js