vue中pinia数据一直重复获取之前的值的解决方法

 更新时间:2024年04月12日 09:54:13   作者:咤娃勇闯天涯  
这篇文章主要介绍了vue中pinia数据一直重复获取之前的值的解决方法,如果想让pinia数据不会重复获取之前的值需要手动强制触发 Pinia store 的状态更新,文中有详细的解决方法,需要的朋友可以参考下

概要

如果想让pinia数据不会重复获取之前的值需要手动强制触发 Pinia store 的状态更新。

场景描述

有个业务如果token有效期失效需要重新跳转到login页面。

技术细节

不进行手动刷新

路由守卫

router.beforeEach( async(to: any, from: any, next: any) =>{
    let userStore = useUserStore()
    let token = userStore.token;
    if(token){
        try {
        // token有效期验证(能访问表示token有效)
          await userStore.queryUser(0,1)
         next()
        }catch (error){
        	//无效移除user信息并跳转到登录页
            REMOVE_USER()
            next("/login")
        }
    }else if(to.path == "/login"){
        next()
    }else {
        next("/login")
    }

})

pinia数据

let useUserStore = defineStore("User", {

    state: (): any => {
        return {
            token: GET_USER(),
            menuList: constantRoutes,
            username: "",
            avatar: ""
        }
    },
    actions: {
            refreshToken() {
                this.token = GET_USER();
            },
            // other actions}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

根据以上代码发现直接获取pinia中的数据,就算移除了user,数据还是保持没移除之前的数据。导致重复执行await userStore.queryUser(0,1);

  try {
          await userStore.queryUser(0,1)
         next()
        }catch (error){
            REMOVE_USER()
            next("/login")
        }

改为

 try {
          await userStore.queryUser(0,1)
         next()
        }catch (error){
            REMOVE_USER()
            userStore.refreshToken()
            next("/login")
        }

实现手动刷新token的值获取最新的值。

在这里插入图片描述

在这里插入图片描述

成功获取到token的最新状态,token失效跳转到首页。

以上就是vue中pinia数据一直重复获取之前的值的解决方法的详细内容,更多关于vue pinia重复获取的资料请关注脚本之家其它相关文章!

相关文章

  • Vue.js项目中管理每个页面的头部标签的两种方法

    Vue.js项目中管理每个页面的头部标签的两种方法

    这篇文章主要介绍了Vue.js项目中管理每个页面的头部标签的两种方法,需要的朋友可以参考下
    2018-06-06
  • 详解Nuxt.js部署及踩过的坑

    详解Nuxt.js部署及踩过的坑

    这篇文章主要介绍了详解Nuxt.js部署及踩过的坑,Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • vue 项目引入echarts 添加点击事件操作

    vue 项目引入echarts 添加点击事件操作

    这篇文章主要介绍了vue 项目引入echarts 添加点击事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue 动态style 拼接宽度问题

    vue 动态style 拼接宽度问题

    这篇文章主要介绍了vue 动态style 拼接宽度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中常用方法的用法汇总

    vue中常用方法的用法汇总

    Vue.js 是一个用于构建用户界面的渐进式框架,本文主要为大家整理了一些常用的 Vue 方法及其详细说明和代码示例,有需要的小伙伴可以参考一下
    2023-11-11
  • vue+element下日期组件momentjs转换赋值问题解决

    vue+element下日期组件momentjs转换赋值问题解决

    这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题,需要的朋友可以参考下
    2024-02-02
  • 简单学习vue指令directive

    简单学习vue指令directive

    这篇文章主要和大家一起简单学习一下vue指令:directive,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue页面中使用getElementsByClassName无法获取元素的解决

    vue页面中使用getElementsByClassName无法获取元素的解决

    这篇文章主要介绍了vue页面中使用getElementsByClassName无法获取元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue.js实战之Vuex的入门教程

    Vue.js实战之Vuex的入门教程

    这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • VUE兄弟组件传值操作实例分析

    VUE兄弟组件传值操作实例分析

    这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
    2019-10-10

最新评论