Question

我想知道是否有一种方法可以访问对象属性作为asyncData（）返回的键？

data() {
    return {
       bookmark_btn: {
        status: null,
        loading: false
      }
   }
}

我尝试了如下所示的访问数据对象属性，但是没有用。

async asyncData(){
    let activity = await axios.get('data.json')
    return { bookmark_btn.status: activity.status}
}

Answer 1

如前所述，由于asyncData是服务器呈现的方法，因此您不能直接访问组件data。

先前的解决方案有效，但我认为这不是使用Nuxt的目的，并且它很复杂（使用第3方lib Vuex并弄乱上下文对象）。

根据API，asyncData将在加载客户端后合并到您的data中，这意味着您将可以访问页面的返回值对象。

这意味着您可以在服务器端完成加载后直接使用它来更改页面的状态，因此您可以使用vue的反应性并直接使用它，也可以使用您的mounted属性中的值页面，这是您的用例的解决方案。

Answer 2

使用新的提取方法代替 Nuxt> = 2.12 中的asyncData。这种获取方法可以具有数据属性。

async fetch() {
    let activity = await axios.get('data.json')

    this.$set(this.bookmark_btn, 'status', activity.status)
}

在官方文档https://nuxtjs.org/api/pages-fetch/

中查看更多内容

或者要使用旧的asyncData，请从组件中删除data（），因为asyncData将返回的内容将追加到data（）中。所以你可以尝试一下

  async asyncData() {
    let activity = await axios.get("data.json")
    return {
      bookmark_btn:{
        status: activity.status,
        loading: false
      }
    }
  }

访问asyncData中的数据对象-Nuxt

2 个答案: