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+ElementUI实现从后台动态填充下拉框的示例代码

    Vue+ElementUI实现从后台动态填充下拉框的示例代码

    本文主要介绍了Vue+ElementUI实现从后台动态填充下拉框的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue2如何获取上页的url地址

    vue2如何获取上页的url地址

    这篇文章主要介绍了vue2如何获取上页的url地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中XMLHttpRequest的使用方法详解

    Vue中XMLHttpRequest的使用方法详解

    Vue中使用XMLHttpRequest(XHR)可以获取数据的方式与传统的HTML页面相同,本文主要来和大家讲讲它的正确使用方法,希望对大家有所帮助
    2023-05-05
  • 详解Vue2和Vue3的区别以及其钩子函数的使用

    详解Vue2和Vue3的区别以及其钩子函数的使用

    Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧
    2024-01-01
  • 手把手教你用vue3开发一个打砖块小游戏

    手把手教你用vue3开发一个打砖块小游戏

    这篇文章主要给大家介绍了关于如何利用vue3开发一个打砖块小游戏的相关资料,通过一个小游戏实例可以快速了解vue3开发小游戏的流程,需要的朋友可以参考下
    2021-07-07
  • v-show 和 v-if 的区别及使用场景分析

    v-show 和 v-if 的区别及使用场景分析

    v-show通过CSS控制显示隐藏,保持DOM元素,适合频繁切换;v-if根据条件生成/销毁DOM,影响生命周期,适用于静态条件,两者在性能、渲染方式及组件状态管理上有显著差异,需根据具体场景选择,本文通过实例代码解析v-show和v-if的区别及使用,感兴趣的朋友一起看看吧
    2025-09-09
  • vue实现鼠标经过动画

    vue实现鼠标经过动画

    这篇文章主要为大家详细介绍了vue实现鼠标经过动画的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Vue实现点击按钮进行上下页切换

    Vue实现点击按钮进行上下页切换

    这篇文章主要介绍了Vue实现点击按钮进行上下页的切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue实现录音功能js-audio-recorder带波浪图效果的示例

    vue实现录音功能js-audio-recorder带波浪图效果的示例

    这篇文章主要介绍了vue实现录音功能js-audio-recorder带波浪图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • ant-design-vue按钮样式扩展方法详解

    ant-design-vue按钮样式扩展方法详解

    这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论