只用 vuex-persistedstate 持久化一个模块

Question

我需要使用 vuex-persistedstate 使我的一个模块通过刷新页面来保持状态。

现在，当我仅在user模块中使用plugins: [createPersistedState()]时，它不起作用。

plugins: [createPersistedState()]仅在商店index.js内使用它时才有效，但它使所有模块持久化，这不是我想要的。

请问，有没有办法将vuex-persistedstate配置为仅使用一个模块？

index.js
//import createPersistedState from 'vuex-persistedstate'
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import workout from './modules/workout'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user,
    workout
  },
  //This makes all store modules persist through page refresh
  //plugins: [createPersistedState()]
})

user.js
import { USER } from '../mutation-types'
import createPersistedState from 'vuex-persistedstate'
export default {
    namespaced: true,
    state: {
        darkMode: true
    },
    getters: {
        getDarkMode: state => () => state.darkMode
    },
    actions: {
        toggleDarkMode: ({commit}) => commit(USER.TOGGLE_DARKMODE)
    }
    mutations: {
        [USER.TOGGLE_DARKMODE]: (state) => state.darkMode = !state.darkMode
    },
    //This doesn't work
    plugins: [createPersistedState()]
}

Answer 1

查看 API 文档，您需要将插件配置为仅保留存储的某个子集。

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: ['user'],
    }),
  ],
});

从上面的文档中：

paths <Array>：用于部分保持状态的任何路径的数组。如果未提供路径，则保留完整状态。必须使用点表示法指定路径。如果使用模块，请包括模块名称。例如："auth.user"(默认值：[](