web-dev-qa-db-fra.com

Fabriquer un seul module persistant avec Vuex-persistedstate

J'ai besoin d'utiliser vuex-persistedstate Pour ne faire qu'un de mes modules pour persister l'état par rafraîchissement de la page.

En ce moment, cela ne fonctionne pas lorsque j'utilise plugins: [createPersistedState()] uniquement à l'intérieur du module user.

plugins: [createPersistedState()] ne fonctionne que lorsque je l'utilise à l'intérieur de la index.js Mais il fait tous les modules persistants ce que je veux.

S'il vous plaît, est-il une façon de configurer vuex-persistedstate Pour fonctionner uniquement avec un 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()]
}
vue.jsstorevuexvuex-modules
8
Ondřej Ševčík

En regardant l'API Docs , vous devrez configurer le plugin pour persister un certain sous-ensemble du magasin.

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

Des documents ci-dessus:

paths <Array>: Un tableau de tous les chemins pour persister partiellement l'état. Si aucun chemin n'est donné, l'état complet est persisté. Les chemins doivent être spécifiés à l'aide de la notation de points. Si vous utilisez des modules, incluez le nom du module. Par exemple: "Auth.User" (défaut: [])

3
Nit