Nuxt 页面 HTML 在数据之前加载

Question

我有一个加载产品详细信息的动态页面，但 html 在数据之前加载。

因此，当我尝试使用图像等静态元素时，我收到一条错误消息，指出对象“产品”不存在。

为了解决这个问题，我给了每个动态元素 v-if="product != undefined"，它确实有效，但似乎不是解决这个问题的好方法。

我正在像这样通过商店启动我的数据

在我的页面中我这样做：

async mounted() {
  await this.fetchProducts()
},
computed: {
  product() {
    return this.$store.state.products.producten.filter(product => product.id == this.$route.params.id)[0]
  }
}

然后在我的店里：

export const state = () => ({
  producten: []
})

export const mutations = {
  setProducts(state, data) {
    state.producten = data
  }
}

export const actions = {
  async fetchProducts({ commit }) {
    await axios.get('/api/products')
      .then(res => {
        var data = res.data
        commit('setProducts', data)
      })
      .catch(err => console.log(err));
  }
}

我尝试将 mounted() 替换为： beforeMount(), created(), fetch() 但是 none 似乎有效。

我也试过：

fetch() {return this.$store.dispatch('fetchProducts')}

Loader(v-if="$fetchState.pending")
Error(v-if="$fetchState.pending")
.product(v-else)
  // Product details...

Answer 1

您可以使用 fetch hook 发送 fetchProducts:

<script>
export default {
  fetch() {
    return this.$store.dispatch('fetchProducts')
  }
}
</script>

在您的模板中，使用 $fetchState.pending 标志来防止在准备好之前呈现数据元素：

<template>
  <div>
    <Loader v-if="$fetchState.pending" />
    <Error v-else-if="$fetchState.error" />
    <Product v-else v-for="product in products" v-bind="product" />
  </div>
</template>

demo

Nuxt 页面 HTML 在数据之前加载

Nuxt page HTML is loaded before data

javascript

store

vue.js

pug

nuxt.js