VueJS中在~/plugins/axios获取$store数据遇错误求助

嘿，我来帮你搞定这个问题～ 你遇到的报错主要源于Store的导出方式错误和Axios Headers的静态设置逻辑不合理，咱们一步步来修复：

第一步：修正Store的导出逻辑 #

你的store.js里，createStore函数返回的是AuthenticationStore这个函数本身，而不是它创建的Store实例，这就导致你在axios插件里导入的store根本不是可用的实例，自然会提示"store未定义"或者无法读取token。

修改后的~/store.js代码：

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      token: null
    },
    mutations: {
      SET_TOKEN: function (state, token) {
        state.token = token
        // 这里可以暂时去掉直接修改axios headers的逻辑，后面用拦截器统一处理
      }
    },
    actions: {
      // 保留你的action逻辑即可
    }
  })
}

export default createStore

第二步：调整Axios插件的逻辑，用请求拦截器动态注入Token #

之前你在axios.create时直接静态设置headers，会有两个问题：一是此时Store可能还没完成初始化，拿不到token；二是后续token更新后，这个headers不会自动同步。

正确的做法是用Axios请求拦截器，每次发起请求前都从Store里取最新的token注入到headers中。而且Nuxt的插件可以直接接收上下文参数，其中就包含已初始化的store，不用手动导入。

修改后的~/plugins/axios.js代码：

import axios from 'axios'

export default ({ store, app }) => {
  // 创建axios实例
  const api = axios.create({
    baseURL: 'http://localhost:8000/api/v1/'
  })

  // 添加请求拦截器，每次请求前注入最新的token
  api.interceptors.request.use(config => {
    // 只有当token存在时才添加Authorization头
    if (store.state.token) {
      config.headers.Authorization = `JWT ${store.state.token}`
    }
    return config
  })

  // 把api实例挂载到Nuxt上下文和Vue原型，方便组件调用
  app.$api = api
}

第三步：在组件中使用这个Api实例 #

之后你就可以在Vue组件里通过this.$api来调用接口，比如：

// 在组件的methods或者asyncData里
async fetchData() {
  const response = await this.$api.get('/your-endpoint')
  // 处理响应数据
}

为什么这样能解决问题？ #

• Store实例正确初始化：修正后的createStore会返回真正的Vuex Store实例，Nuxt启动时会正确初始化它，插件里通过上下文获取的store是完全可用的。
• 动态获取Token：请求拦截器会在每次请求前执行，确保拿到的是Store中最新的token值，就算token更新了，下一次请求也会自动使用新的token。
• 符合Nuxt的插件规范：通过上下文参数获取store，避免了手动导入可能导致的实例未初始化问题。

内容的提问来源于stack exchange，提问作者KitKit