Nuxt.js 嵌套路由加载问题

Question

以上所有代码都来自我在 pages/apibuilder/models 文件夹中的文件 _id.vue

我用它来用数据填充我的商店

async asyncData({ store }) {
    // this.datas = await this.$axios
    //  .$get('/api/apibuilder/retrievemodel')
    //  .then(function (res) {
    //      return res
    //  })
    return { datas: await store.dispatch('apibuilder/retrieve_model') }
},

我在模板中以两种不同的方式使用这些数据

1 在 v-for 循环中

<tr v-for="(data, name, index) in $store.state.apibuilder.currentModel.attributes":key="index">

2 我想显示这个 $store.state.apibuilder.currentModel.attributes 我这样做的数量

<span> {{Object.keys($store.state.apibuilder.currentModel.attributes).length}}Champs</span>

如果我使用 nuxtlink 导航到我的嵌套页面：http://localhost:3000/apibuilder/models/Article 一切正常，我的循环和计数工作正常

但是如果我尝试刷新页面或直接从 url 访问站点

我让循环工作，但不是计数 我有一个错误告诉我 $store.state.apibuilder.currentModel.attributes 为空并且它破坏了 object.keys().length

代码 1 和 2 在模板中非常接近，但是，它一次为 Null，并在几行之后显示循环。

任何的想法？

附：

我试图在计算属性中进行计数，但它是相同的，当我重新加载页面时数据未定义。

我也试过 SSR = true 和 SSR = false

我也尝试使用 fetch 而不是 asyncData

Answer 1

我认为问题与 fetch 或 asyncData 无关。

您获取数据并将其存储在状态中。 那挺好的。 但在那之后，你不应该使用store.state ：而是使用 getter （我发现使用mapGetters更干净）。

您的商店会喜欢这样的：

export const state = () => ({
    apibuilder: {},
});
export const getters = {
    attributes(state) {
        return state.apibuilder.currentModel.attributes;
    }
}

在您的组件中：

import {mapGetters} from 'vuex';

export default {
    computed: {
        ...mapGetters({
            attributes: 'attributes',
        }),
        countAttributes() {
            if (this.attributes) {
               return Object.keys(this.attributes).length
            }
        }
    }
}

多亏了这一点，它将对商店中数据的变化做出反应。