vuex - 使用 vuex-persistedstate 和 js-cookie 保存 Vuex 状态

Question

正如我在文档中看到的那样，我正在尝试将 Vuex 状态保存在 Cookies 中。js-cookies 和 vuex-persistedstate 是这样导入的：

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

在 LocalStorage 中保存状态可以正常工作：

 const store = new Vuex.Store({
  state: {

  },
  mutations: {

  },
  getters: {

  },
  modules: {
    user,
    register,
    auth,
  },
  plugins: [createPersistedState()]
}) 

尝试将状态保存在 Cookies 中我没有得到 Vuex 值：

 const store = new Vuex.Store({
  state: {

  },
  mutations: {

  },
  getters: {

  },
  modules: {
    user,
    register,
    auth,
  },
  plugins: [createPersistedState({ 
    storage: {
      getItem: key => Cookies.get(key),
      // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
      setItem: (key, value) => Cookies.set(y, value, { expires: 3, secure: true }),
      removeItem: key => Cookies.remove(key)
      }
    }
  )]
})

稍后编辑

使用 vuex-persist 包一切正常！

const vuexCookie = new VuexPersistence({
  restoreState: (key, storage) => Cookies.getJSON(key),
  saveState: (key, state, storage) =>
    Cookies.set(key, state, {
      expires: 3
    })
})

// Store
const store = new Vuex.Store({
  state: {

  },
  mutations: {

  },
  getters: {

  },
  modules: {
    chestionare,
    user,
    register,
    auth,
  },
  plugins: [vuexCookie.plugin]
}) 

Answer 1

尝试改变这一点：

[createPersistedState({ 
    storage: {
      getItem: key => Cookies.get(key),
      // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
      setItem: (key, value) => Cookies.set(y, value, { expires: 3, secure: true }),
      removeItem: key => Cookies.remove(key)
      }
    }
)]

对此：

[createPersistedState({
    key: 'your_key',
    storage: {
      getItem: (key) => JSON.parse(Cookies.get(key)),
      setItem: (key, value) => Cookies.set(key, JSON.stringify(value), {expires: 3, secure: true}),
      removeItem: (key) => Cookies.remove(key)
    }
})]