使用 vuex-persistedstate 只持久化一個模塊

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

查看API 文檔，您需要將插件配置為僅保留存儲的某個子集。

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

從上面的文檔：

paths <Array> ：用於部分保留狀態的任何路徑的數組。 如果沒有給出路徑，則完整狀態將被持久化。 必須使用點表示法指定路徑。 如果使用模塊，請包含模塊名稱。 例如：“auth.user”（默認值： [] ）