vue.js - Nuxt fetch 中的 Vuex 操作 "not a function"

Question

我刚刚为我的 Nuxt 页面之一引入了错误处理，显然该操作在 fetch 内部映射和调用引发非函数错误。如果try/catch块不在那里它按预期工作并且根本没有错误。
这是我的组件剥离到基本部分:

export default {
  name: 'ViewArticle',
  async fetch ({ error }) {
    try {
      await this.fetchArticle({ articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },
  computed: {
    ...mapGetters({
      article: 'article/single'
    }),
    articleSlug () {
      return this.$route.params.articleSlug
    }
  },
  methods: {
    ...mapActions({
      fetchArticle: 'article/fetchOne'
    })
  }
}

我假设 mapActions 以某种方式只在 spiel 稍后执行，但无法弄清楚如何防止错误。这样，基本上每次我加载页面时，它都会立即重定向到错误页面。
我收到的错误消息如下。显然fetchArticle是一个函数，除非它在 ​​try 内/catch块，它按预期工作。

this.fetchArticle is not a function                                                                                                               03:30:51

  at Object.fetch (52.js:32:18)
  at server.js:2881:39
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:2864:51)

Answer 1

Fetch 提供了 context作为论据。

fetch(context)

在上下文中，我们可以找到我们的商店。在这里您可以查看上下文包含哪些内容:https://nuxtjs.org/api/context

fetch(context) {
   let store = context.store;
}

人们喜欢破坏它

fetch({ store }) {}

您的代码应如下所示:

  async fetch ({ error, store }) {
    try {
      await store.dispatch('article/fetchOne', { articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },

获取在服务器端执行，这就是为什么你得到 is not an function错误。它的未定义

... fetch is called on server-side...