vue.js - Nuxt/TypeScript: Kan inte komma åt this - TS2339: Egenskapen 'XXX' finns inte på typen

Jag har ett problem med att använda Nuxt.js med TypeScript. I mitt projekt använder jag beroenden som axios eller nuxt-i18n. För detta exempel använder jag Axios. Jag konfigurerade det enligt dokumentationen för nuxt/axios.

nuxt.config.js

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

tsconfig.json

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

Nu vill jag använda $axios i min Vuex-butik så här:

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

Men nu får jag felet:

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

Redigera: Kommentarerna säger att det borde hjälpa att använda en arrow-funktion. Jag försökte så här:

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

men nu visas följande fel på "detta."

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

Svar #1

Efter att ha lagt till axios-pluggen nuxt.config.js inuti plugins-mappen, lägg till axios-accessor.ts med följande innehåll :

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

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

export default accessor

skapa sedan en mapp med namnet utils och lägg inuti den filen api.ts :

import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

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

I din butik kan du importera $axios på följande sätt :

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)
    }
  }
}

För mer information, kolla detta

Relaterade artiklar