Vuex储存数据,刷新页面数据就会丢失问题

既然刷新页面数据就会丢失,我看很多说的将state中的数据放在sessionStorage中,那为什么直接放在浏览器当中呢?

基于问题

  1. vuex的store是暂时性的存储机制,页面刷新或者跳转 都会导致store数据重置
  2. 基于vuex数据的不持久性,建议存储到当前系统域名下 对应的浏览器缓存中,可以是sessionStorage,或者localStorage
  3. 一般存储在sessionStorage是因为 系统关闭浏览器或者退出的时候 会自动清空sessionStorage 这是由H5的sessionStorage得api特性决定的 目地是为了确保数据安全 以及在使用时候的便捷性

祝好 如有帮助 望采纳 点赞

   // 解决VueX浏览器刷新数据丢失问题
    if (sessionStorage.getItem("store")) {
      //页面加载前读取sessionStorage里的状态信息
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    window.addEventListener("beforeunload", () => {
      //在页面刷新前将vuex里的信息保存到sessionStorage里
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

没理解你的问题是什么

你存储在浏览器,值改变的时候,vue是无法直接响应显示到页面的