在应用加载之前将数据加载到vuex存储中，如何做到这一点？

Question

我正在对created的{​​{1}}钩子内的商店进行调度调用，然后在子组件中使用App.vue进行请求，问题似乎是加载应用程序时，子组件是在之前加载的，数据已存储在商店中，并且不会显示。我对控制台进行了登录，并且第一个日志是存储商店的子组件，对此我对此充满信心。如何保证在整个站点上加载所需的getter会在加载任何其他组件之前发生？

---

// App.vue

dispatch

//子组件

created() {
       this.$store.dispatch(this.$mts.diseases.DISEASES_LIST) //note I tried with async/await to no avail
    ...

如前所述，我试图在App.vue asyn中创建代码，但似乎它没有首先加载，所以这没有帮助。

Answer 1

您应该将该属性放在子组件中的一台计算计算机内，这样一来，只要存储中的值存在，它就会立即填充

computed: {
    diseases () {
        return this.$store.getters.diseasesList
    }
}

See the VueX docs

如果要在加载组件之前等待数据可用，则可以使用v-if see docs

<your-component v-if="$store.getters.diseasesList">
    ...
</your-component>

Answer 2

考虑使用Nuxt.js（https://nuxtjs.org/），它具有fetch和asyncData的开箱即用支持，因此该组件不会在它们返回的承诺得到解决之前呈现。 / p>