我需要使用vuex-persistedstate
只使我的一个模块通过刷新页面来保持状态。
现在,当我仅在plugins: [createPersistedState()]
模块中使用user
时,它不起作用。
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()]
}
查看the API docs,您需要将插件配置为仅保留商店的某个子集。
export default new Vuex.Store({
// ...
plugins: [
createPersistedState({
paths: ['user'],
}),
],
});
从上面的文档:
paths <Array>
:一系列部分坚持国家的道路。如果没有给出路径,则保持完整状态。必须使用点表示法指定路径。如果使用模块,请包含模块名称。例如:“auth.user”(默认值:[]
)