Vuex页面F5被刷新后，state内容全部丢失的问题解决

1. 产生原因

• store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2. 解决办法

方法一

• 将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中
• 让页面在刷新前存store到localStorage中。当然，在页面刷新时还要读localStorage中的数据到store中，读取和储存都写在app.vue中。

export default {
  name: "App",
  created() {
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
    });

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") &&
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem("messageStore"))
        )
      );
  }
};

方法二

1、安装

npm install --save vuex-persistedstate

2、在store.js中引入

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
  plugins: [createPersistedState()],
});