1.前言
1.持久化存储一直都是开发过程中经常遇到的场景
2.这个自己写下逻辑,其实在react-persist中写过
3.大体的原理就是把存储
vuex里面的状态可以存储到localstorage一份,因为localstorage刷新后数据还是在的,比如token的存储
2. 自己写 -持久化核心代码
新建文件
persist.js不清楚具体流程的可以加入打印步骤 或者断点跟踪
1.判断是否支持
localstorage2.读取
localstorage的值 ,判断是否存储过3.存储过就更新
4.全局监听
subscribe,这个是API5.业务逻辑比较简单话,可以一股脑全存进去
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) }) }
3. 完整逻辑配置参考
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
![X{Q4M)$1]A6@J9@$}J~X)8F.png](https://ucc.alicdn.com/pic/developer-ecology/628a481d59ca44dea00971ecbaa7c9f8.png?x-oss-process=image/resize,w_1400/format,webp "X{Q4M)$1]A6@J9@$}J~X)8F.png")
6. 单独存储变量的 store配置
6.1 store
哪个需要存储到
localstorage,就写哪个注意这里这个
persist键就是存储到localStorae里面的key当然你可以随意起名字
plugins: [new VuexPersistence({ reducer: state => ({ persist: state.testPersisit //这个就是存入localStorage的值 }) }).plugin]
6.2 state
这个是拆分了单独的
state
export default{ testPersisit:{}, }
6.3 mutations
export default{ // 持久化存储 setTestPersisit (state, obj) { state.testPersisit = obj } }
7. 组件内使用
7.1 import
import { mapState, mapMutations } from "vuex";
7.2 computed
// 映射 state里面 的状态 ...mapState(["testPersisit"])
7.3 methods
methods: { ...mapMutations(["setTestPersisit"]) }
7.4 修改 访问
点击
this.setTestPersisit({ name: "测试" }); console.log("store 持久化:", this.testPersisit);
