javascript - 如何在 Nuxt 中的页面元头属性之前等待发布数据？

Question

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

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())
  },
}

Answer 1

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

head() {
    retun {
        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,
            },
        ],
    }
}

我在这里阅读了 GitHub 上的类似帖子。由于您使用的是商店，我假设您也在使用 asyncData 函数来获取它们。