Vuex 公共状态管理持久化处理

为什么需要持久化处理？

如果不做初始化，刷新页面，vuex中代码重新执行，数据就会丢失。（把数据存储到本地）

持久化处理方法

1、安装 vuex-persistedstate 插件 或 vuex-along

• 传送门：https://juejin.cn/post/6918684399659646989
• 传送门：https://juejin.cn/post/7006890304217284638

安装

npm install vuex-along --save

配置 vuex-along: 在 store/index.js 中最后添加以下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
    //modules: {
        //controler  //模块化vuex
    //},
    plugins: [VueXAlong({
        name: 'store',     //存放在localStroage或者sessionStroage 中的名字
        local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置
        session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
    })]
});

2、手动持久化处理

• 在 app.vue 里面，页面卸载的时候，把数据存储到 session 或 localStorage中

mounted() {
  window.addEventListener("unload", this.saveState);
},
methods: {
  saveState() {
    sessionStorage.setItem("state", JSON.stringify(this.$store.state));
  },
},

• 创建 vuex 的时候，使用三目运算法获取数据

import Vue from 'vue'
import vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(vuex)

const store = new vuex.Store({
  state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : state,
  mutations,
  actions,
  getters
})

export default store

created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
},