Question

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

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

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

Answer 1

请看the API docs，您需要将插件配置为仅保留商店的特定子集。

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

来自上面的文档：

paths <Array>：部分保留状态的所有路径的数组。如果没有给出路径，则完整状态将保留。必须使用点符号指定路径。如果使用模块，请包含模块名称。例如：“ auth.user”（默认值：[]）

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

1 个答案: