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)
    })
}

---

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

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

---

参考资料

vuex-plugin
vuex-persist

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉