Question

我通过 vuex 操作从组件中获取了 api/repository.js 中的 api：

//component:
<button @click="click">button</button>

methods:{
  ...mapActions(['click'])
}

//store:
async click({commit}) {
  await this.$repository.liveEvents.genreById().then(data => {
    // commit
  }
}

// api/liveEvents.js:
const baseUrl = process.env.config.baseUrl;

export default ($axios) => ({
   genreById($axios) {
    return $axios.get(`${baseUrl}`)
  }
})

// api/repository.js
import LiveEvents from '~/api/liveEventsApi'

export const repository = ($axios) => ({
  liveEvents: LiveEvents($axios)
})

我还为它创建了一个插件：

// plugins/repository.js:
import { repository } from '~/api/Repository.js'

export default (context, inject) => {
  inject('repository', repository(context.$axios))
}

并已将其添加到我的 nuxt.config.js 中：

  plugins: [
    { src: '~plugins/repository.js'}
  ],

但是，当我单击组件中的按钮时，出现错误 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined！我认为问题是 api/repository.js 不知何故不理解 $axios。但是，当我在我的商店或直接在我的组件中使用 $axios 时，我没有收到任何错误！有人知道这里出了什么问题吗？

Answer 1

context 对象不直接包含 $axios 实例。 $axios 实例位于 app 对象内。您必须像下面这样访问 $axios：

import { repository } from '~/api/Repository.js'
 
export default ({ app }, inject) => {
  inject('repository', repository(app.$axios))
}

<----------------------- 响应后更新 ----------------- -------->

在您的 api/liveEvents.js 页面中，您声明函数错误。在这里，您必须从 $axios 函数中删除 genreById 参数，因为如果您不将 axios 传递给您的函数，它可能是未定义的。

export default ($axios) => ({
   genreById($axios) {
             ^^^^^^ - remove it
    return $axios.get(`${baseUrl}`)
  }
})

如果在 $axios.$get(...) 未定义的上下文中调用 $axios，JS 会抛出类似 TypeError: Cannot read property '$get' of undefined 的错误。

尝试检查您的代码并检查您是否有上述语法错误。

类型错误：无法读取未定义的 nuxt

1 个答案: