使用@nuxtjs/axios提示Store<RootState>无$axios属性如何解决

解决方案 #

• 这个报错是因为@nuxtjs/axios默认只会扩展Vue实例的类型，不会自动给Vuex的Store类型注入$axios的定义，需要手动扩展全局类型。
• 首先在项目中新增/修改全局类型声明文件（可命名为vuex.d.ts，放在项目根目录或者自建的types目录下），添加如下代码：

import { NuxtAxiosInstance } from '@nuxtjs/axios'

declare module 'vuex/types/index' {
  interface Store<S> {
    $axios: NuxtAxiosInstance
  }
}

• 检查tsconfig.json的配置是否正确：
  • 确保typeRoots字段包含了你存放声明文件的目录，示例配置：

  {
    "compilerOptions": {
      "typeRoots": ["./node_modules/@types", "./types"],
      "types": ["@nuxtjs/axios"]
    },
    "include": ["types/**/*.d.ts", "store/**/*.ts", "**/*.vue"]
  }
  

• 重启TS语言服务：按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P），执行TypeScript: Restart TS Server即可，不需要重启整个VS Code。
• 如果你使用的是Nuxt3，@nuxtjs/axios已经停止维护，官方推荐使用内置的useFetch或者$fetch方法，若一定要用axios需要自行实现全局注入，再对应扩展类型。

如果只是临时需要规避报错，可以用(this as any).$axios的写法调用，但会丢失类型提示，不推荐长期使用。

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