Nuxt @onloadstart 不使用 beforeCreate 触发功能

Question

Nuxt 和 SSR 的新手。我要做的很简单：我试图在页面加载之前触发一个函数，该函数将 SSR 我的 Firestore 数据。如果我用@onclick 添加一个按钮，它工作正常。但是当我尝试用 @onloadstart 或类似的东西替换 Button/OnClick 时，什么也没有发生。

我错过了什么？我怀疑我是从客户端的角度考虑这个问题。不是 SSR 镜头。

 <template @onloadstart="beforeCreate()">
  <section>
    <div>
      <div v-for="article in articles" id="articleCardList" :key="article">
        <v-card elevation="1" outlined>
          <div class="d-flex">
            <v-avatar class="ma-1" size="125" tile>
              <v-img :src="article.thumbnail"></v-img>
            </v-avatar>
            <div>
              <v-card-title
                class="text-h5 text-wrap d-flex justify-space-between text-caption"
                v-text="article.title"
              >
                {{ article.title }}
              </v-card-title>
            </div>
          </div>
        </v-card>
      </div>
    </div>
  </section>
</template>
<script>
import { fireDb } from '~/plugins/firebase.js'
export default {
  data() {
    return {
      articles: [],
    }
  },

  methods: {
    async asyncData() {
      this.articles = []

      await fireDb
        .collection('articles')
        .get()
        .then((querySnapShot) => {
          querySnapShot.forEach((doc) => {
            this.articles.push({
              id: doc.id,
              title: doc.data().title,
              description: doc.data().description,
              thumbnail: doc.data().thumbnail,
              date: doc.data().date,
              link: doc.data().link,
              source: doc.data().source,
            })
            console.log(this.articles)
          })
        })
    },
    beforeCreate() {
      window.addEventListener('beforeCreate', this.asyncData)
    },
  },
}
</script>

Answer 1

就让组件在页面加载之前自动获取数据而言，您已接近可行的解决方案。而不是beforeCreate，你会使用the asyncData hook（这似乎是你最初的尝试）。

问题是您已将asyncData 声明为组件方法，但它需要位于对象定义的顶层才能用作组件挂钩。 p>

export default {
  // ✅ declared as a hook
  asyncData() {...},

  methods: {
    // ❌ this should be at the top level
    asyncData() {...} 
  },
}

请注意，asyncData 只能用于页面或布局组件。否则需要切换到the fetch hook。

asyncData() 无法访问this（因为它在页面组件之前运行），因此应该删除这些引用。相反，asyncData() 应该返回一个类似于从data() 返回的数据对象（即{ ​articles }）：

export default {
  ​asyncData() {
    ​const articles = []

    ​await fireDb
      ​.collection('articles')
      ​.get()
      ​.then((querySnapShot) => {
        ​querySnapShot.forEach((doc) => {
          ​articles.push(/*...*/)
        ​})
      ​})

    console.log(articles)
    return { articles }
  }
}