关于前端:解决vuex页面刷新导致数据丢失问题高效简单

解决 vuex 页面刷新导致数据失落问题

vuex 数据是存在内存当中，当页面刷新之后 vuex 数据天然会失落。咱们有两种办法解决该问题:
1. 应用 vuex-along
2. 应用 localStorage 或者 sessionStroage

1. 应用 vuex-along

vuex-along 的本质也是将 vuex 中的数据寄存到 localStorage 或者 sessionStroage 中，只不过这个存取过程这个组件会帮咱们实现, 咱们只须要用 vuex 的读取数据形式操作就能够了, 简略理解一下 vuex-along 的应用办法。

装置 vuex-along:

npm install vuex-along --save

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

plugins: [VueXAlong({
    name: 'store',     // 寄存在 localStroage 或者 sessionStroage 中的名字
    local: false,      // 是否寄存在 local 中  false 不寄存 如果寄存依照上面 session 的配置
    session: {list: [], isFilter: true } // 如果值不为 false 那么能够传递对象 其中 当 isFilter 设置为 true 时，list 数组中的值就会被过滤调, 这些值不会寄存在 seesion 或者 local 中
})]

2. 应用 localStorage 或者 sessionStroage

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

下面两种办法都能够解决 vuex 页面刷新导致数据失落问题。依照下面的办法配置之后就能够失常应用 vuex 了，页面刷新数据也不会失落了。