Vuex操作未将本地存储令牌添加到Axios post调用

npm install axios

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://api.example.com', // 设置接口请求的基本URL
  timeout: 5000, // 设置请求超时时间
});

export default api;

npm install vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    token: '', // 用于存储本地令牌的状态
  },
  mutations: {
    setToken(state, token) { // 设置本地令牌的mutation
      state.token = token;
    },
  },
  actions: {
    saveToken({ commit }, token) { // 保存本地令牌的action
      commit('setToken', token);
    },
  },
});

export default store;

import api from '@/api.js';
import store from '@/store.js';

async postData(data) {
  try {
    const token = store.state.token; // 获取本地令牌
    api.defaults.headers.common['Authorization'] = `Bearer ${token}`; // 在请求头中添加本地令牌
    const response = await api.post('/api/post', data); // 发起post请求
    return response.data;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

saveToken(token) {
  this.$store.dispatch('saveToken', token); // 调用saveToken action保存本地令牌
}