Данные, которые мы храним в vuex, помещаются только в кеш браузера и будут потеряны при обновлении страницы.
Конечно, его также можно сохранить локально через vuex, а затем извлечь и понять, что данные обновления страницы не будут потеряны.
В этой статье в основном объясняется плагин vuex-persistedstate, принцип тот же, что и выше, за исключением того, что нет необходимости писать сохраненный код вручную, его можно реализовать в соответствии с простой конфигурацией.
1. Скачать
npm установить vuex-persistedstate --save
2. Использовать - импортировать и настраивать плагины в index.js в папке магазина
По требованиям проекта может быть сконфигурирован по модулям, а может быть сконфигурирован без модулей
1. Независимо от модуля
Просто настройте его прямо в stroe/index.js.在这里插入代码片
import Vuex from "vuex";
import Vue from 'vue'
// 引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
const state = {
};
const mutations = {
};
const actions = {
};
const store = new Vuex.Store({
state,
mutations,
actions,
/* vuex数据持久化配置 */
plugins: [
createPersistedState({
// 存储方式：localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值
key: "store",
render(state) {
// 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
return {
...state
};
}
})
]
});
export default store;
2. Подмодуль
В модуле напишите это:
export default ({
state: {
},
mutations: {
},
actions: {
}
})
Конфигурация в stroe/index.js выглядит следующим образом:
import Vuex from "vuex";
import Vue from 'vue'
// 引入模块
import fanSystem from './modules/fanSystem'
// 引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
const getters = {
}
const store = new Vuex.Store({
// 有哪些模块
modules: {
fanSystem
},
getters,
/* vuex数据持久化配置 */
// plugins: [createPersistedState()],//没有任何参数的配置写法
plugins: [
createPersistedState({
//带参数的写法
// 存储方式：localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值（如果不写默认是vuex）
key: "store",
paths: ['fanSystem', ] //要存的数据模块，如果不配置，默认所有模块的数据都保存
})
]
});
export default store;
После того, как модуль разделен, мы вызываем методы в мутациях и действиях без изменений.
this.$store.commit[方法名] // mutations
this.$store.dispath[方法名] // actions
При выборке данных в состоянии их необходимо получить по модулю.
this.$store.state[模块名][数据名]
Таким образом, мы его настроили, и нам не нужно самим писать метод хранения.