Making only one module persistent with vuex-persistedstate
Looking at the API docs, you will need to configure the plugin to only persist a certain subset of the store.
export default new Vuex.Store({
plugins: [
createPersistedState({
paths: ['user'],
}),
],
});
From the docs above:
paths <Array>
: An array of any paths to partially persist the state. If no paths are given, the complete state is persisted. Paths must be specified using dot notation. If using modules, include the module name. eg: "auth.user" (default:[]
)
Ondřej Ševčík
Updated on June 07, 2022Comments
-
Ondřej Ševčík almost 2 years
I need to use
vuex-persistedstate
to make only one of my modules to persists state through refresh of the page.Right now, it doesn't work when I use
plugins: [createPersistedState()]
only inside theuser
module.plugins: [createPersistedState()]
works only when I use it inside the store'sindex.js
but it make all modules persistent which is not what I want.Please, is there a way how to configure
vuex-persistedstate
to work only with one 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()] }
-
Pash over 2 yearsbut nux has feature hot reload that does all import module in .nuxt/store.js that automatically put all you modules in persistence state
-
Wikki over 2 yearsthis works for me in nuxt application export default ({ store }) => { createPersistedState({ paths: ['auth-module'], storage: window.sessionStorage, })(store) }