VUE----解决vuex刷新数据丢失问题

最新推荐文章于 2025-04-18 16:44:05 发布

Ta曰丿、她活

最新推荐文章于 2025-04-18 16:44:05 发布

阅读量829

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/zlw_spider/article/details/104539171

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种解决Vuex数据因页面刷新而丢失的方法，通过在用户登录时将人员信息同时保存到Vuex和sessionStorage，利用App.vue组件在页面加载时从sessionStorage恢复数据至Vuex，确保了数据的持久性和应用状态的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【一】vuex的数据存储在内存中，页面一刷新就会丢失

vuex中存储的内容：人员信息。

解决办法：

1：人员登陆成功时，将人员信息保存到vuex和sessionStorage里面各一份。

2：页面刷新时，在App.vue里面取出sessionStorage保存的人员信息，并设置到vuex中去。如果路由里面做了根据vuex里面是否有人信息来判断是否登陆的，需要修改为判断sessionStorage里面是否有值，因为刷新时，vuex里面的内容已经消失了，先走的路由，然后进入到App.vue页面中。

// App.vue 改写如下：
<script>
  export default {
    name: 'App',
    created () {
      // 解决vuex刷新导致数据丢失的问题
      //在页面加载时读取sessionStorage里的状态信息
      //console.log('1，app.vue：'+ sessionStorage.getItem('personInfo'));    
      if (!!sessionStorage.getItem("personInfo")) {
        //console.log('2，here');
        //this.$store.replaceState(Object.assign({}, this.$store.state.personInfo, JSON.parse(sessionStorage.getItem("personInfo"))))
        this.$store.commit('setPersonInfo', JSON.parse(sessionStorage.getItem('personInfo')))
      } 
    }
  }
</script>

有的说在使用这个onbeforeunload事件，但是我测试怎么都触发不了。

然后路由判断是否登陆改为：

router.beforeEach((to, from, next) => {
  Loading.open('努力奔跑中...');
  document.title = to.matched[0].meta.title;	 //更改各个页面的title
  if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    const personInfo = JSON.parse(sessionStorage.getItem('personInfo'));
    const personId = personInfo.personId;
    if (!!personId) {   // 判断当前是否已登陆
      next();
    } else {  // 没有登录，微信授权登陆weixin_auth
       //
    }
  } else {
    next();
  }
});

自己写的测试例子暂时是这样的，确实是可以解决刷新导致vuex里面的内容丢失问题。