vuex-along解决vuex中存储的数据在页面刷新之后失去的问题
程序员文章站
2024-02-28 11:53:58
...
一. 发现问题
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题。其实这个问题困扰我很久了????,以前就只会傻傻地使用localStorage来解决。今天偶然看到公司的大佬在项目中使用了vuex-along插件(之前没见过),于是请教了一番,然后自己在网上也搜了搜这个插件,感觉发现了新大陆????。学吧,学无止境????
二. 解决问题
一般都会采用cookie、sessionStorage或localStorage等方法(但这些方式只适用于数据量较少的情况), 而在正真的开发中,封装好的vuex-along 可能更实用(推荐)
安装
npm install vuex-along --save
yarn add vuex-along
基本使用:
到此为止,插件已经生效了,默认会存储所有 state 到 localStorage
接下来说说更详细的用法:
传入需要的参数来满足使用需求
import Vue from 'vue';
import Vuex from 'vuex';
import createVuexAlong from "vuex-along";
const moduleA = {
state: {
a1: "hello",
}
};
const store = new Vuex.Store({
state: {
count: nll
token:''",
},
mutations: {
set_count: (state, payload) => {
state.count= payload
},
set_token: (state, payload) => {
state.token = payload
},
plugins: [
createVuexAlong({
name: "hello-vuex-along", // 设置保存的集合名字,避免同站点下的多项目数据冲突
local: {
list: ["ma"],
isFilter: true // 过滤模块 ma 数据, 将其他的存入 localStorage
},
session: {
list: ["count", "ma.a1"] // 保存 count 和模块 ma 中的 a1 到 sessionStorage
}
//如果对于sessionstorage不进行任何操作,也可将session设为false
})
]
});
参数:
VuexAlongOptions
字段 | 必选 | 类型 | 描述 |
---|---|---|---|
name | 否 | String | 设置本地数据集合的名字,默认为 vuex-along |
local | 否 | Object | localStorage 的配置,见 #WatchOptions |
session | 否 | Object | sessionStorage 的配置,见 #WatchOptions |
justSession | 否 | Boolean | 仅使用 sessionStorage |
WatchOptions
字段 | 必选 | 类型 | 描述 |
---|---|---|---|
list | 是 | String [] | 需要监听的属性名或模块名的字符串列表 |
isFilter | 否 | Boolean | 过滤 list 中的字段而非保存 |
数据清理:
window.clearVuexAlong(local = true, session = true):void;
clearVuexAlong() // localStorage 和 sessionStorage 都会被清理
clearVuexAlong(true,false) // 只清理 localStorage
clearVuexAlong(false,true) // 只清理 sessionStorage
上一篇: Repeater控件实现编辑、更新、删除等操作示例代码
下一篇: java实现左旋转字符串