最近在学Vuejs， 发现刷新页面出现 vuex 中的数据丢失问题: 例如从第一个页面跳转到第二个页面后刷新，这个时候保存在 vuex中的数据丢失从而导致页面空白。针对这个问题总结了如下两种方法。

方法一

我们都知道如果在浏览器中保存数据使用 session 或者 cookie，因此我们可以在main.js 或 App.vue 中添加如下代码

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

例如 App.vue 中添加：

<template>
  <div id="app">
    <Main/>
  </div>
</template>
<script>
import Main from "./components/Main";
export default {
  name: "app",
  components: {
    Main
  },
  created() {
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
      sessionStorage.removeItem("store");
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  }
};
</script>

方法二

使用 vuex 状态的小插件 vuex-along，安装：

npm install vuex-along --save

import 导入：

import vuexAlong from 'vuex-along'

将 vuex-along 添加至 store 的 plugins 的数组里：

export default new Vuex.Store({
  state:{...},
  ...
  plugins: [vuexAlong]
});

这时插件已经生效了，默认保存所有的 state，可以通过相应API来设置。

相关资料：https://github.com/boenfu/vuex-along#readme (opens new window)