Question

我正在使用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())
  },
}

Answer 1

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

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

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

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

1 个答案: