使用 vuex-persistedstate 仅使一个模块持久化

Posted 2023-02-22

【中文标题】使用 vuex-persistedstate 仅使一个模块持久化

【英文标题】：Making only one module persistent with vuex-persistedstate

【发布时间】：2019-08-14 14:02:18

【问题描述】：

我需要使用vuex-persistedstate 让我的一个模块通过刷新页面保持状态。

现在，当我仅在 user 模块内使用 plugins: [createPersistedState()] 时，它不起作用。

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

【参考方案1】：

查看the API docs，您需要将插件配置为仅保留商店的某个子集。

export default new Vuex.Store(
  plugins: [
    createPersistedState(
      paths: ['user'],
    ),
  ],
);

来自上面的文档：

paths <Array>：任何路径的数组，用于部分持久化状态。如果没有给出路径，完整的状态会被持久化。必须使用点表示法指定路径。如果使用模块，请包含模块名称。例如：“auth.user”（默认：[]）

【讨论】：

但是 nux 具有热重载功能，可以在 .nuxt/store.js 中执行所有导入模块，自动将所有模块置于持久状态

这适用于 nuxt 应用程序导出默认值 ( store ) => createPersistedState( paths: ['auth-module'], storage: window.sessionStorage, )(store)