Плагин Vuex persistence - решает проблему исчезновения данных обновления

JavaScript Vue.js Vuex

Vuex может выполнять глобальное управление состоянием, но данные исчезнут после обновления, чего мы не хотим видеть. Как решить, можно добиться персистентности данных в сочетании с локальным хранилищем, либо через плагины-vuex-persistedstate.

Добро пожаловать в мой личный блог

1. Вручную используйте локальное хранилище HTML5

метод

  • Состояние vuex оценивается в localStorage или sessionStorage или других методах хранения.
  • В методах, определенных в мутациях, обрабатывается состояние vuex, а также выполняется соответствующая операция над хранилищем.

这样state就会和存储一起存在并且与vuex同步

проблема

  • Наиболее интуитивно понятно, что вручную писать сложнее.

2. Используйте плагин vuex-persistedstate

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

инструкции

  • Установить
npm install vuex-persistedstate  --save

  • Импорт и настройка

    В index.js в магазине

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

Хранилище по умолчанию для localStorage

Чтобы сохранить в sessionStorage, настройте следующим образом

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理Сохранять все состояния по умолчанию

Укажите состояние, которое необходимо сохранить, конфигурация следующая

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
      	return {
      	// 只储存state中的assessmentData
    	  assessmentData: val.assessmentData
    	}
	 }
  })]

Vuex относится к методу написания нескольких плагинов.

Например, подключаемый модуль, запрашиваемый vuex, используется вместе с постоянным подключаемым модулем, и конфигурация выглядит следующим образом.

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误

Дополнение: Используйте несколько методов хранения одновременно (например, некоторые используют sessionStorage, а некоторые используют localStorage)

看github上的文档发现没有直接可以这样使用的方式，所以我采用创建多个实例的方式,如下

const createPersisted = createPersistedState({
  storage: window.sessionStorage,
  // 移除sessionState储存的device
  reducer: (vuexState) => {
    let sessionState = Object.assign({}, vuexState)

    for (let key in sessionState) {
      if (key === 'device') {
        delete sessionState[key]
      }
    }
    return sessionState
  }
})
const createStorage = createPersistedState({
  key: 'vuexStorage',
  storage: window.localStorage,
  reducer: (vuexState) => {
  // localStorage只储存device信息
    return vuexState.device
  }
})

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    device
  },
  strict: debug,
  plugins: debug ? [createLogger(), createStorage, createPersisted] : [createStorage, createPersisted]
})
  • редуктор: функция возвращает объект состояния, который необходимо сохранить

удалить хранилище

有个思路是：写一个mutaition方法，做的事是将所有state制为初始值

Нажмите, чтобы прыгнутьАдрес github плагина

Категории