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

这是答案很容易的时代之一。原来我在 state 属性对象中有 plugins 属性。我只是将它移到国家财产之外，现在一切都按预期工作。

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

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

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

Vuex createPersistedState 部分持久化不起作用

3 个答案: