简介:
Vue项目中使用Vuex,相当于全局的变量存储,可以在所有的vue组件中共享数据、动态修改数据。
当我们刷新浏览器的时候,store中的状态都会被清空、重新初始化为最初的状态,在某些情况下,我们可能需要将这些状态保存下来,所以这篇来介绍如何让vuex状态持久化存储。
方法一:手写方式
新建一个名为SessionUtils.js的文件
export class SessionUtils {
static get(key) {// 获取
return JSON.parse(window.sessionStorage.getItem(key));
}
static set(key, value) {// 添加
window.sessionStorage.setItem(key, JSON.stringify(value));
}
static remove(key) {// 删除
window.sessionStorage.removeItem(key);
}
}
使用方式
import { SessionUtils } from "../utils/SessionUtils.js";// 引入SessionUtils.js
export default {
state: {
content: SessionUtils.get("content") | null,// 获取
},
mutations: {
//每当我们去修改状态的时候,都会往session中存储一下,
// 浏览器刷新的时候,就会先从 session中取,达到持久化存储效果
setBtn(state, val) {// 添加
SessionUtils.set("content", state.content);
},
removeBtn(state, val) {// 删除持久化状态
SessionUtils.remove("content");
},
},
actions: {},
};
方法二:使用第三方插件 npm install vuex-persistedstate
使用方式
import Vue from "vue";
import Vuex from "vuex";
import tab from "./tab.js";
import user from "./user.js";
Vue.use(Vuex);
// 引入插件
import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
modules: {
tab,
user,
},
/* vuex数据持久化配置 */
plugins: [
// 方法一 存储所有的state状态
createPersistedState({
storage: window.sessionStorage, // 存储方式:localStorage、sessionStorage、cookies
key: "store", // 存储的的key值
reducer(state) {
// 存储了state中所有的数据
return { ...state };
},
}),
// 方法二 存储指定的状态
// createPersistedState({
// storage: window.sessionStorage,
// key: "user",
// // 只持久化存储user模块的状态
// paths: ['user']
// })
],
});