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()]
}

Answer 1

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