vuex-7-persist-持久化存储
2021-07-19 本文已影响0人
云高风轻
1.前言
1.持久化存储一直都是开发过程中经常遇到的场景
2.这个自己写下逻辑,其实在react-persist中写过
3.大体的原理就是把存储vuex里面的状态可以存储到localstorage一份,因为localstorage刷新后数据还是在的,比如token的存储
2. 自己写 -持久化核心代码
新建文件
persist.js
不清楚具体流程的可以加入打印步骤 或者断点跟踪
1.判断是否支持localstorage
2.读取localstorage的值 ,判断是否存储过
3.存储过就更新
4.全局监听subscribe,这个是API
5.业务逻辑比较简单话,可以一股脑全存进去
6.store文件 作为插件配置
export default store => {
// 将存储在localStorage里面的状态还原
if (localStorage) {
// 反序列化
const user = JSON.parse(localStorage.getItem("user"))
console.log("1-1-1-1",user);
//有值更新
if (user) {
// 存储进去
store.commit("user/userInfoMutation", user)
}
}
// 如果用户相关的状态发生变化,就自动存入 localStorage
store.subscribe((mutation, state) => {
console.log("2-2-2-2");
localStorage.setItem("user", user)
})
}
- 完整逻辑配置参考
store.subscribe((mutation, state) => {
console.log("2-2-2-2");
//type形式有可能是 user/userInfoMutation
if (mutation.type ==="user/userInfoMutation") {
console.log("3-3-3-3");
//序列化
const user = JSON.stringify(state.user)
localStorage.setItem("user", user)
}else if(mutation.type ==="user/logout"){
console.log("序列化-else");
localStorage.removeItem("user")
}
4. store配置
import persist from '../plugins/persist'
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules: {
user
},
strict:true,
plugins:[persist]
})
5.第三方库 persist的使用
说到持久化
persist这个流行的依赖就离不开呀
1. 安装
npm install --save vuex-persist
yarn add vuex-persist
2. 引入
store文件
import VuexPersistence from 'vuex-persist'
3. 创建持久化对象
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
4. store持久化配置
plugins:[vuexLocal.plugin]
搞定 以上就是
vuex的持久化存储,这样写默认会存储vuex里的所有state
1.png
5. 单独存储变量的 store配置
5.1 store
哪个需要存储到
localstorage,就写哪个
注意这里这个persist键就是存储到localStorae里面的key
当然你可以随意起名字
plugins: [new VuexPersistence({
reducer: state => ({
persist: state.testPersisit //这个就是存入localStorage的值
})
}).plugin]
5.2 state
这个是拆分了单独的
state
export default{
testPersisit:{},
}
5.3 mutations
export default{
// 持久化存储
setTestPersisit (state, obj) {
state.testPersisit = obj
}
}
6. 组件内使用
6.1 import
import { mapState, mapMutations } from "vuex";
6.2 computed
// 映射 state里面 的状态
...mapState(["testPersisit"])
6.3 methods
methods: {
...mapMutations(["setTestPersisit"])
}
6.4 修改 访问
点击
this.setTestPersisit({ name: "测试" });
console.log("store 持久化:", this.testPersisit);
1.png
1.png
