#typescript #vue.js #axios #nuxt.js
#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'],
), чтобы он был инициализирован.