解决 Vuex 中异步问题：获取最新的 Token 值

素颜马尾好姑娘i 2024-03-24 20:19 39阅读 0赞

## 解决 Vuex 中异步问题：获取最新的 Token 值 ##

在使用 Vuex 管理状态时，有时会遇到异步问题，特别是在获取异步数据并将其保存到 Vuex 中后，立即获取该数据时可能会出现问题。在这篇文章中，我们将讨论如何解决这个问题，并确保在获取 Token 值时始终获取到最新的值。

### 问题背景 ###

假设我们有一个 Vuex 模块 `auth`，其中包含了登录、登出和检查 Token 的方法。在登录成功后，我们将 Token 保存到 Vuex 的状态中，并且在需要的时候从状态中获取 Token 值。

const auth = {
        
      state: {
        
        token: null
      },
      mutations: {
        
        SET_TOKEN(state, token) {
        
          state.token = token;
        },
        CLEAR_TOKEN(state) {
        
          state.token = null;
        }
      },
      actions: {
        
        login({
          commit }, loginForm) {
        
          return new Promise((resolve, reject) => {
        
            // 调用登录接口，传递登录表单数据
            axios.post('http://localhost:8989/user/login', loginForm)
              .then(response => {
        
                const token = response.data.data.token;
                // 将token保存到Vuex中
                commit('SET_TOKEN', token);
                // 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
                localStorage.setItem('token', token);
                resolve();
              })
              .catch(error => {
        
                reject(error);
              });
          });
        },
        logout({
          commit }) {
        
          // 清除token并重定向到登录页面
          commit('CLEAR_TOKEN');
          localStorage.removeItem('token');
          router.push('/');
        },
        checkToken({
          commit }) {
        
          const token = localStorage.getItem('token');
          if (token) {
        
            // 将token保存到Vuex中
            commit('SET_TOKEN', token);
          } else {
        
            // 如果没有token，则重定向到登录页面
            router.push('/');
          }
        },
        getToken(){
        
          console.log("我被调用了")
          return this.state.token;
        }
      }
    };

在上述代码中，我们把getToken这个方法放在了，Action中，这就会导致一个问题，就是虽然我们登录成功之后，token也set成功了，但是了，当我们取token的时候，会发现这个token为空值。

由于异步问题，当我们立即调用 `getToken` 方法时，它可能会返回 `null` 值，因为在调用 `getToken` 时，`SET_TOKEN` 方法可能还没有被调用。

### 解决方案 ###

为了解决这个问题，我们需要将 `getToken` 方法移到 `state` 中，并定义一个 `getter` 来获取 Token 的值。这样，在调用 `getToken` 时，它会返回最新的 Token 值。

修改后的代码如下：

const auth = {
        
      state: {
        
        token: null
      },
      mutations: {
        
        SET_TOKEN(state, token) {
        
          state.token = token;
        },
        CLEAR_TOKEN(state) {
        
          state.token = null;
        }
      },
      actions: {
        
        login({
          commit }, loginForm) {
        
          return new Promise((resolve, reject) => {
        
            // 调用登录接口，传递登录表单数据
            axios.post('http://localhost:8989/user/login', loginForm)
              .then(response => {
        
                const token = response.data.data.token;
                // 将token保存到Vuex中
                commit('SET_TOKEN', token);
                // 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
                localStorage.setItem('token', token);
                resolve();
              })
              .catch(error => {
        
                reject(error);
              });
          });
        },
        logout({
          commit }) {
        
          // 清除token并重定向到登录页面
          commit('CLEAR_TOKEN');
          localStorage.removeItem('token');
          router.push('/');
        },
        checkToken({
          commit }) {
        
          const token = localStorage.getItem('token');
          if (token) {
        
            // 将token保存到Vuex中
            commit('SET_TOKEN', token);
          } else {
        
            // 如果没有token，则重定向到登录页面
            router.push('/');
          }
        }
      },
      getters: {
        
        getToken(state) {
        
          return state.token;
        }
      }
    };

在组件中，我们可以通过 `this.$store.getters.getToken` 来获取最新的 Token 值。

通过下面的代码，我们就可以正常的获取了

![在这里插入图片描述][6650ad6d11b84e78ad331dd72b75dc5a.png]

[6650ad6d11b84e78ad331dd72b75dc5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/c856f6ca3d55420aad5c8810cfd3569d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关解决 Vuex 中异步问题：获取最新的 Token 值

解决 Vuex 中异步问题：获取最新的 Token 值在使用 Vuex 管理状态时，有时会遇到异步问题，特别是在获取异步数据并将其保存到 Vuex 中后，立即获取该数据

素颜马尾好姑娘i/ 2024年03月24日 20:19/ 0 赞/ 40 阅读

相关【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

一、导言 1、引言 > [Vuex][]是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上，提供了一种集中管理应用程序状态的方式

水深无声/ 2024年02月23日 08:19/ 0 赞/ 57 阅读

相关【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

一、导言 1、引言 > Vuex是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上，提供了一种集中管理应用程序状态的方式。使用V

蔚落/ 2024年02月23日 02:15/ 0 赞/ 32 阅读

相关获取数组中的最大值,以及最小值

package com.java; import org.junit.Test; import java.util.Arrays;

谁践踏了优雅/ 2023年06月19日 04:29/ 0 赞/ 46 阅读

相关 springboot拦截器无法获取token值的问题

springboot拦截器无法获取token值的问题问题描述导致该问题的原因解决办法问题描述前后端分离项目使用token进行登录

╰半夏微凉°/ 2023年06月08日 07:00/ 0 赞/ 496 阅读

相关 jq异步获取值

> 在开发过程中，如果使用jquery时，有时候会用到ajax的一些方法去异步获取值，这时候就是出现一些问题，如下： > > var arr = []; >

心已赠人/ 2022年12月26日 04:49/ 0 赞/ 156 阅读

相关 vuex——计算属性获取的getter值需要刷新才能更新

vuex——计算属性获取的getter值需要刷新才能更新描述： // state state: { leader: null

我会带着你远行/ 2022年11月15日 05:58/ 0 赞/ 250 阅读

相关 js获取数组中的最大值最小值

1、遍历方法： var tmp=\[1,12,8,5\]; var max=tmp\[0\]; for(var i=1;i<tmp.length;i++)\{ if(m

川长思鸟来/ 2022年05月31日 02:27/ 0 赞/ 331 阅读

相关 nuxt，axios中使用Vuex【获取Vuex中的值】

> 登录的时候，需要设置一个token请求头，想在axios里面全局配置一下 > 找了半天，终于被我找到了。? 1、配置vuex [https://blog.csdn.n

冷不防/ 2021年11月22日 11:38/ 0 赞/ 737 阅读

相关 WebApi 后台获取token值

前台传递一个token，后台不知道怎么获取那么不是很悲剧吗。 $(function () { $.ajax({

た入场券/ 2021年09月17日 14:34/ 0 赞/ 583 阅读