vuex页面刷新导致数据丢失的解决方案

npm install vuex-along --save

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中
  })]
});

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