Блог

Главная - Вопросы по программированию - Создание только одного модуля постоянным с помощью vuex-persistedstate

Создание только одного модуля постоянным с помощью vuex-persistedstate

#javascript #vue.js #vuex #store #vuex-modules

#javascript #vue.js #vuex #Магазин #vuex-модули

Вопрос:

Мне нужно использовать 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()]
}

Ответ №1:

Просматривая документы API, вам нужно будет настроить плагин для сохранения только определенного подмножества хранилища.

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

Из документов выше:

paths <Array> : Массив любых путей для частичного сохранения состояния. Если пути не указаны, сохраняется полное состояние. Пути должны быть указаны с использованием точечной нотации. При использовании модулей укажите имя модуля. например: «auth.user» (по умолчанию: [] )

Комментарии:

1. но в nux есть функция горячей перезагрузки, которая выполняет весь импорт модуля.nuxt/store.js это автоматически переводит все ваши модули в состояние сохранения

2. у меня это работает в приложении nuxt экспорт по умолчанию ({ store }) => { createPersistedState({ пути: [‘auth-module’], хранилище: window.sessionStorage, })(store) }