zoukankan      html  css  js  c++  java
  • 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))
        })
    }
    
  • 相关阅读:
    由于可能不会将凭据发送到远程计算机,因此将不会进行连接。若要获得协助,请与您的系统管理员联系。
    URL编码与解码
    linux服务器openjdk11环境easypoi导出excel报错(class sun.font.CompositeFont cannot be cast to class sun.font.PhysicalFont)
    解决Drools中文乱码
    CISSP-什么是安全冠军以及您为什么需要安全冠军
    windows环境中JDK环境变量配置
    【Django】定时任务
    【Django】权限之has_perm
    一些连接
    数据库
  • 原文地址:https://www.cnblogs.com/panghu123/p/11746513.html
Copyright © 2011-2022 走看看