如何在Nuxt中的页面meta head属性之前等待发布数据？

问题描述

我正在使用Nuxt SSR动态注入head property来设置页面级元数据。数据正在从Firebase获取。我正在获取未定义的属性，因为它不等待发布数据完成加载。如何等待head属性之前的发布数据？

client.js?16a3:97 TypeError: Cannot read property 'post' of undefined

// page\:post.vue
<script>
import { mapState,mapActions } from 'vuex'
export default {
  fetch() {
    this.fetchPost()
  },computed: {
    ...mapState('posts',['post']),},methods: {
    ...mapActions('posts',['fetchPost']),head: {
    title: this.post.title,link: [{ rel: 'canonical',href: this.post.canonical }],Meta: [
      { hid: 'name',itemprop: 'name',content: this.post.title },{
        hid: 'description',itemprop: 'description',content: this.post.content,],}
</script>

// store\posts.js
export const state = () => ({
  post: null,})
export const mutations = {
  setPost(state,payload) {
    state.post = payload
  },}
export const actions = {
  async fetchPost({ commit },key) {
    const doc = await postsCollection.doc(key).get()
    if (doc.exists) commit('setPost',doc.dat())
  },}

解决方法

构造头部（对象）的方式可以更改为函数。

wholenumber = a + d
numerator = b * f + e * c
denominator = c * f

我在GitHub here上读过类似的文章。由于您正在使用商店，所以我假设您还使用asyncData函数来获取它们。