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

Posted 2023-02-22

【中文标题】Nuxt/TypeScript：无法访问 - TS2339：类型上不存在属性“XXX”

【英文标题】：Nuxt/TypeScript: Cannot access this - TS2339: Property 'XXX' does not exist on type

【发布时间】：2021-03-24 08:25:28

【问题描述】：

我在使用带有 TypeScript 的 Nuxt.js 时遇到问题。在我的项目中，我使用 axios 或 nuxt-i18n 等依赖项。对于这个例子，我使用的是 Axios。我在 nuxt/axios 的 documentation 中配置它

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 ; '.`

编辑： cmets 说，使用箭头函数应该会有所帮助。我试过这样：

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'.

【问题讨论】：

使用箭头函数定义getIP函数可能会解决你的问题。

简单函数是基于上下文的，并使用'this'关键字作为你的访问内部属性（因为这个函数不在一个类或某个函数中）。箭头函数不这样做，并获取您父母上下文的“this”上下文。

@DanielFarina 我使用箭头函数编辑了我的帖子。但现在还有另一个错误。你能看一下吗？

【参考方案1】：

在plugins文件夹内添加axios插件nuxt.config.js后添加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

【讨论】：

我觉得很奇怪这在文档中没有被引用。 this.$axios 显示的示例不能开箱即用。无论如何，这是一个可行的解决方案，谢谢！另外别忘了在nuxt.config.js（plugins: ['~/plugins/axios-accessor.ts'],）中列出插件，这样它就会被初始化。