无法在Nuxt 2.12中使用$ fetchState

Question

因此，我尝试使用文档中描述的新功能。

但是我最终遇到此错误：

属性或方法“ $ fetchState”未在实例上定义，但在渲染期间被引用。

即使我的组件清楚地定义了fetch（）方法，但我设法从中获取了一些东西。

<template>
    <div v-if="$fetchState">
        <p v-if="$fetchState.pending">Fetching posts...</p>
        <p v-else-if="$fetchState.error">Error while fetching posts</p>
        <div v-else>
            <div v-if="content.content1" v-html="content.content1" />
            <div v-if="content.content2" v-html="content.content2" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
    async fetch({ store, error }) {
        try {
            await store.dispatch('home/fetchContent')
        } catch (e) {
            error({
                statusCode: 503,
                message: 'Unable to fetch'
            })
        }
    },
    computed: mapState({
        content: (state) => state.home.content
    })
}
</script>

以前有没有人遇到过？

Answer 1

[当您使用fetch（context）时，您将使用旧的fetch，如果需要，您应该从中获取上下文。

  async fetch() {
    const { store, error } = this.$nuxt.context

    try {
      await store.dispatch('home/fetchContent')
    } catch (e) {
      error({
        statusCode: 503,
        message: 'Unable to fetch'
      })
    }
  },

https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/#fetch-before-nuxt-2-12