Nuxt / TypeScript: не удается получить доступ к этому - TS2339: свойство 'XXX' не существует для типа

#typescript #vue.js #axios #nuxt.js

Вопрос:

У меня проблема с использованием Nuxt.js с помощью машинописного текста. В моем проекте я использую зависимости, такие как axios или nuxt-i18n. Для этого примера я использую Axios. Я настроил его, как в документации для nuxt / axios

nuxt.config.js

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

tsconfig.json

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

Теперь я хочу использовать $axios в моем хранилище Vuex следующим образом:

 {
  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')
    ...
  }
};

но теперь при «этом» появляется следующая ошибка.

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

1. Используйте функцию со стрелкой для определения функции getIP, которая может решить вашу проблему.

2. Простые функции основаны на контексте и используют ключевое слово ‘this’ в качестве внутреннего атрибута доступа (поскольку эта функция не находится внутри класса или какой-либо функции). Функции со стрелками этого не делают и получают контекст ‘this’ ваших родительских контекстов.

3. @DanielFarina Я отредактировал свой пост, используя функцию со стрелкой. но теперь есть еще одна ошибка. не могли бы вы взглянуть на это?

Ответ №1:

После добавления плагина axios nuxt.config.js в plugins папку add 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)
    }
  }
}

Для получения более подробной информации проверьте это

1. Мне кажется странным, что на это нет ссылок в документах. Показанный пример с this.$axios не работает из коробки. В любом случае, это рабочее решение, спасибо! Также не забудьте указать плагин в nuxt.config.js ( plugins: ['~/plugins/axios-accessor.ts'], ), чтобы он был инициализирован.