Question

在nuxtjs的页面中，使用异步数据或fetch读取是一种更好的方法，而不是使用创建的钩子。

我正在努力使我的代码正常工作

我有以下内容（确实可以使用）

created () {
  this.$store.dispatch('cases/getCase', this.$route.params.caseId );
},

但是请问如何将其更改为与异步方法一起使用，并在需要时可以返回多个状态。

我尝试了以下

     async asyncData ({ params }) {
        const thisCase = await this.$store.dispatch('cases/getCase', this.$route.params.caseId );
// constant thisUser
        return { thisCase }
// return { thisCase, thisUser}
      },

但这会产生错误

未定义不是对象（正在评估“ this。$ store”）

有人可以告诉我我做错了吗

谢谢

Answer 1

this在asyncData / fetch中不可用。甚至在docs中以特殊的橙色警告表示。

您无法通过此内部访问组件实例 asyncData，因为它是在启动组件之前被调用的。

再次如文档所述

方法接收上下文对象作为第一个参数，可以使用它来获取一些数据并返回组件数据。

上下文是您应从何处获取商店的位置。 Here docs用于上下文。

所以您的代码应该是

 async asyncData ({ params, store }) {
    const thisCase = await store.dispatch('cases/getCase', params.caseId )
    return { thisCase }
  },

使用nuxtjs在我的页面中使用异步数据

1 个答案: