Nuxt/TypeScript：无法访问此 - TS2339：类型上不存在属性“XXX”

Question

我在使用 Nuxt.js 和 TypeScript 时遇到问题。在我的项目中，我使用 axios 或 nuxt-i18n 等依赖项。在这个例子中，我使用的是 Axios。我像nuxt/axios文档中那样配置它

nuxt.config.js

export default {
  modules: ['@nuxtjs/axios']
  axios: {},
}

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  }
}

现在我想在我的 Vuex 商店中使用 $axios，如下所示：

{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

但现在我收到错误：

`TS2339: Property '$axios' does not exist on type '{ getIP(state: any, { commit }: { commit: any; }): Promise ; }'.`

编辑：评论说，使用箭头函数应该有所帮助。我尝试过这样的：

export const actions = {
  getIP: async ({commit}) => {
    const ip = await this.$axios.$get('http://icanhazip.com')
    ...
  }
};

但现在“this”上出现以下错误。

TS7041: The containing arrow function captures the global value of 'this'.

Answer 1

nuxt.config.js在文件夹中添加 axios 插件后，plugins添加axios-accessor.ts以下内容：

import { Plugin } from '@nuxt/types'
import { initializeAxios } from '~/utils/api'

const accessor: Plugin = ({ $axios }) => {
  initializeAxios($axios)
}

export default accessor

然后创建一个名为的文件夹utils并在其中添加文件api.ts：

import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
  $axios = axiosInstance
}
   
export { $axios }

在您的商店中，您可以导入$axios类似的内容：

import { $axios } from '~/utils/api'

...

{
  actions: {
    async getIP ({ commit }) {
      const ip = await $axios.$get('http://icanhazip.com') //use $axios without this
      commit('SET_IP', ip)
    }
  }
}

欲了解更多详细信息，请检查此