Vuex createPersistedState 部分坚持不工作

Question

根据持久化状态文档 (https://www.npmjs.com/package/vuex-persistedstate)，我正尝试像这样部分持久化状态：

export default new Vuex.Store({
  state: {
    user: {},
    signupLayout: false,
    adminLayout: false,
    sidebarOpen: false,
    homeLayout: false, /* New - 6/01/2021 */
    cloudinary: {
      cloud_name: "*****",
      base_upload_preset: "*****",
      channel_header_upload_preset: "*****",
      profile_image_upload_preset: "*****",
      audio_upload_preset: "*****",
      cover_image_upload_preset: "*****",
    },
    plugins: [createPersistedState({
      paths: ["user", "signupLayout", "adminLayout", "sidebarOpen", "homeLayout"]
    })],
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setSignupLayout(state, bool) {
      state.signupLayout = bool;
    },
    setSidebarOpen(state, bool) {
      state.sidebarOpen = bool;
    },
    setAdminLayout(state, bool) {
      state.adminLayout = bool;
    },

    /* New - 6/01/2021 */
    setHomeLayout(state, bool) {
      state.homeLayout = bool;
    },
  },

但是，当我尝试运行代码时，没有任何内容被保留。谁能告诉我为什么，以及如何解决？

Answer 1

vuex-persistedstate 插件可能不需要保存您的默认状态，因为什么都没有改变。我也没有在你的 vuex 商店中看到任何变化。 persistedstate 插件适用于状态突变，因此使用突变 (vuex docs mutations page) 修改您的状态，插件应该开始工作。

Answer 2

这是答案非常容易的时代之一。原来我在状态属性对象中有插件属性。我只是将其移出状态属性，现在一切正常。

export default new Vuex.Store({
  state: {
    user: {},
    signupLayout: false,
    adminLayout: false,
    sidebarOpen: false,
    homeLayout: false, /* New - 6/01/2021 */
    cloudinary: {
      cloud_name: "*****",
      base_upload_preset: "*****",
      channel_header_upload_preset: "*****",
      profile_image_upload_preset: "*****",
      audio_upload_preset: "*****",
      cover_image_upload_preset: "*****",
    },
  },
  plugins: [createPersistedState({
    paths: ['user', 'signupLayout', 'adminLayout', 'sidebarOpen', 'homeLayout']
  })],
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setSignupLayout(state, bool) {
      state.signupLayout = bool;
    },
    setSidebarOpen(state, bool) {
      state.sidebarOpen = bool;
    },
    setAdminLayout(state, bool) {
      state.adminLayout = bool;
    },

    /* New - 6/01/2021 */
    setHomeLayout(state, bool) {
      state.homeLayout = bool;
    },
  },
});

Answer 3

插件的位置属性不正确。应该是这样的。

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
    
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [createPersistedState()],
})

Vuex createPersistedState 部分坚持不工作

Vuex createPersistedState partial persist not working

persist

vue.js

vuex