Nuxt 和 fetch 挂钩：未定义属性或方法“$fetchState”

Question

我有一个普通的 Nuxt 设置，并在尝试使用 fetch() 挂钩渲染页面时收到以下错误：

错误：

[Vue warn]: Property or method "$fetchState" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <PostDetails>
       <Nuxt>
         <DefaultLayout> at layouts/default.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
warnNonPresent @ vue.runtime.esm.js?2b0e:2015
get @ vue.runtime.esm.js?2b0e:2070
render @ _slug.vue?cd54:5
Vue._render @ vue.runtime.esm.js?2b0e:3548
updateComponent @ vue.runtime.esm.js?2b0e:4055
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
merged @ vue.runtime.esm.js?2b0e:3301
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3969
eval @ vue.runtime.esm.js?2b0e:8200
wrappedHook @ vue.runtime.esm.js?2b0e:2235
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
eval @ vue.runtime.esm.js?2b0e:7696
eval @ vue.runtime.esm.js?2b0e:336
whenTransitionEnds @ vue.runtime.esm.js?2b0e:7391
eval @ vue.runtime.esm.js?2b0e:7728
requestAnimationFrame (async)
eval @ vue.runtime.esm.js?2b0e:7363
requestAnimationFrame (async)
nextFrame @ vue.runtime.esm.js?2b0e:7362
performLeave @ vue.runtime.esm.js?2b0e:7720
leave @ vue.runtime.esm.js?2b0e:7704
remove$$1 @ vue.runtime.esm.js?2b0e:7797
removeAndInvokeRemoveHook @ vue.runtime.esm.js?2b0e:6155
removeVnodes @ vue.runtime.esm.js?2b0e:6129
patch @ vue.runtime.esm.js?2b0e:6558
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2932
eval @ vue-router.esm.js?8c4f:2931
updateRoute @ vue-router.esm.js?8c4f:2352
eval @ vue-router.esm.js?8c4f:2206
eval @ vue-router.esm.js?8c4f:2340
step @ vue-router.esm.js?8c4f:1944
step @ vue-router.esm.js?8c4f:1951
runQueue @ vue-router.esm.js?8c4f:1955
eval @ vue-router.esm.js?8c4f:2335
step @ vue-router.esm.js?8c4f:1944
eval @ vue-router.esm.js?8c4f:1948
eval @ vue-router.esm.js?8c4f:2322
eval @ vue-router.esm.js?8c4f:2105
iterator @ vue-router.esm.js?8c4f:2300
step @ vue-router.esm.js?8c4f:1947
step @ vue-router.esm.js?8c4f:1951
eval @ vue-router.esm.js?8c4f:1948
eval @ vue-router.esm.js?8c4f:2322
_callee6$ @ client.js?06a0:487
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
render @ client.js?06a0:263
iterator @ vue-router.esm.js?8c4f:2300
step @ vue-router.esm.js?8c4f:1947
eval @ vue-router.esm.js?8c4f:1948
eval @ vue-router.esm.js?8c4f:2322
_callee4$ @ client.js?06a0:184
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
loadAsyncComponents @ client.js?06a0:147
iterator @ vue-router.esm.js?8c4f:2300
step @ vue-router.esm.js?8c4f:1947
step @ vue-router.esm.js?8c4f:1951
runQueue @ vue-router.esm.js?8c4f:1955
confirmTransition @ vue-router.esm.js?8c4f:2330
transitionTo @ vue-router.esm.js?8c4f:2203
push @ vue-router.esm.js?8c4f:2544
push @ vue-router.esm.js?8c4f:2966
push @ router.js?5783:28
handler @ vue-router.esm.js?8c4f:1133
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
client.js?06a0:97 TypeError: Cannot read property 'pending' of undefined
    at Proxy.render (_slug.vue?cd54:5)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4055)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at createComponent (vue.runtime.esm.js?2b0e:5978)

要渲染的模板代码：

<template>
  <p v-if="$fetchState.pending">Fetching photo details...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
    <h1>{{ post.title }}</h1>
    <p>{{ post.question }}</p>
    <button @click="$fetch">Refresh</button>
  </div>
</template>
<script>
export default {
  name: 'PostDetails',
  async fetch({ params }) {
    try {
      const postRef = await this.$fire.firestore
        .collection('posts')
        .doc(params.id)
        .get()
      const docSnapshot = postRef.data()
      this.post = docSnapshot
    } catch (error) {
      console.error('error fetching post', error)
    }
    // this.post = await fetch(
    //   'https://api.nuxtjs.dev/mountains'
    // ).then(res => res.json())
  },
  data() {
    return {
      post: {}
    }
  }
}
</script>

有人发现我做错了什么吗？

Answer 1

您正在使用 \xe2\x80\x9eold\xe2\x80\x9c 提取定义，并将上下文作为参数。\n从调用中删除参数（并使用this）应该会适当地触发新的提取。

\n