Making only one module persistent with vuex-persistedstate

Question

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 the user module.

plugins: [createPersistedState()] works only when I use it inside the store's index.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()]
}

Etheryte · Accepted Answer · 2021-07-07T08:01:14.963

33

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: [])

edited Jul 07 '21 at 08:01

answered Mar 23 '19 at 22:47

Etheryte

24,589
11
71
116

but nux has feature hot reload that does all import module in .nuxt/store.js that automatically put all you modules in persistence state – Pash Aug 12 '21 at 10:34
this works for me in nuxt application export default ({ store }) => { createPersistedState({ paths: ['auth-module'], storage: window.sessionStorage, })(store) } – Wikki Oct 23 '21 at 16:58

Making only one module persistent with vuex-persistedstate

1 Answers1