typescript - Nuxt/ typescript : Cannot access this - TS2339: Property 'XXX' does not exist on type

Question

我在使用 Nuxt.js 和 TypeScript 时遇到问题。在我的项目中，我使用 axios 或 nuxt-i18n 等依赖项。在这个例子中，我使用的是 Axios。我在 documentation 中配置了它对于 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

添加axios插件后nuxt.config.js内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)
    }
  }
}

更多详情请查看 this