Is there a way to configure vuex-persistedstate
so that only one module persists state through page refresh?
Currently, when I use
plugins: [createPersistedState()]
inside the user
module, it does not work.
plugins: [createPersistedState()]
only works when used in the store's index.js
, but this makes all modules persistent which is not desired.
Is there a method to make vuex-persistedstate
work with just one specific module?
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()]
}