如何在Nuxt的Vuex Store的Action中正确调用axios？

问题原因 #

你用的是nuxt-property-decorator提供的类式Vuex写法，和官方示例的选项式Vuex写法this绑定逻辑不同：Nuxt自动注入的$axios默认没有挂载到类式Vuex模块的this上下文上，同时你写的Action方法存在多余的参数解构，进一步导致上下文绑定异常。

解决步骤 #

1. 移除Action方法的多余参数 #

类式Vuex的Action不需要接收上下文作为第一个参数，你代码里的axiosSideInfo({})空解构是错误写法，直接去掉参数即可。同时注意nuxt-property-decorator导出的Vuex Action装饰器为@Action，如果你的代码里写的是@VuexAction需要确认导入来源是否正确，避免导入错误装饰器导致绑定失效。

2. 扩展VuexModule类型声明（TS项目必填） #

在项目根目录新建types/vuex.d.ts声明文件，添加以下内容，让TS识别挂载到Vuex模块上的$axios类型：

import { NuxtAxiosInstance } from '@nuxtjs/axios'

declare module 'vuex-module-decorators' {
  interface VuexModule {
    $axios: NuxtAxiosInstance
  }
}

3. 修正后的store代码示例 #

import { Module, Action } from 'nuxt-property-decorator';

@Module({
  name: 'user',
  stateFactory: true,
  namespaced: true
})
export default class User extends VuexModule {

  @Action({ rawError: true })
  private async axiosSideInfo() {
    // 这里的this.$axios已经可以正常调用
    await this.$axios.post('你的接口地址', {
      // 请求参数
    })
  }
}

备用方案：手动注入$axios #

如果上述配置后还是识别不到$axios，可以用@Inject装饰器手动注入实例：

import { Module, Action, Inject } from 'nuxt-property-decorator';
import { NuxtAxiosInstance } from '@nuxtjs/axios'

@Module({
  name: 'user',
  stateFactory: true,
  namespaced: true
})
export default class User extends VuexModule {
  // 手动注入$axios
  @Inject('$axios') private $axios!: NuxtAxiosInstance

  @Action({ rawError: true })
  private async axiosSideInfo() {
    await this.$axios.post('你的接口地址')
  }
}

额外排查点 #

• 确认你的项目是Nuxt2版本，@nuxtjs/axios仅支持Nuxt2，Nuxt3已内置$fetch无需额外安装axios模块
• 确认nuxt.config.js里的modules配置项确实把@nuxtjs/axios放在了正确位置，没有被其他模块覆盖注入逻辑

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