Vuex中的数据在 F5刷新后 数据消失的问题

有两种办法：

利用vuex-persistedstate插件

利用本地存储 sissionstorage 、 localstorage

    我用到的是本地永久存储的localstorage （用到axios要先引入import axios from "axios"; 不然肯定会有undefined报错的哟~）

created() {
    if (
      JSON.parse(              //判断是否存在本地存储
        !localStorage.getItem("panghu") ||
          localStorage.getItem("panghu") == "undefined"
      )
    ) {              //不存在本地存储则请求载入json数据 
      axios.get("/api/panghu").then(data => {
        //请求到的数据是data   下面的代码表示我调用了vuex中的mutation函数
//将data中的我需要的数据传入了mutat函数中去了，在那个函数中我将data数据放//入了公共的state中的panghu中去了
        this.$store.commit("increment",data.data.data);
        //以下三条不重要  是我本组件内在赋值给本组件中的变量
        this.home_one = this.$store.state.panghu.home_one;
        this.home_two = this.$store.state.panghu.home_two;
        this.home_three = this.$store.state.panghu.home_three;
         //新建一个胖虎 将共享的state数据赋值给此处的panghu
        let panghu = this.$store.state.panghu;
        //将请求到的数据加入到缓存中去
        localStorage.setItem("panghu", JSON.stringify(panghu));
      });
    } else {
//以下是当缓存中有panghu的数据时，直接加载缓存中的数据到共享的state中
和以上的方法是一样的
      let panghus = JSON.parse(localStorage.getItem("panghu"));
      this.$store.commit("increment",panghus);
//以下三条不重要
      this.home_one = panghus.home_one;
      this.home_two = panghus.home_two;
      this.home_three = panghus.home_three;
    }
},

补充钩子函数created的理解： 这个钩子是组件刚刚创建完成，data等属性刚绑定
没有生成DOM的时候
而beforeCreate是data属性都没有绑定之前，这时候是不能绑定data中的属性的

再补充网上大佬的缓存机制 ： 在刷新之前缓存：

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