我使用Vue.observable()来管理状态,并且在vue-router加载大多数视图之前,需要等待两个存储属性被填充。
我尝试将加载放在beforeCreate中,在App.vue中创建并挂载生命周期事件,因为它是我的web应用的根:
<template lang='pug'>
#app
AppHeader
router-view
AppFooter
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AppHeader from '@/components/AppHeader.vue'; // @ is an alias to /src
import AppFooter from '@/components/AppFooter.vue';
import { mutations } from '@/store';
@Component({
components: {
AppHeader, AppFooter
}
})
export default class App extends Vue {
private async beforeCreate(): Promise<[void, void]> {
return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);
}
}
</script>
但是vue路由器在promises有机会解析之前加载依赖于这些状态属性的其他视图。我的所有视图都依赖于要填充的属性,因此将return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);
移到它们的生命周期事件处理程序中效率不高。
有没有更好的地方来运行这段代码,这样它就可以保证在vue路由器加载视图之前完成?
发布于 2019-05-13 18:26:53
我修改了两个属性中每个属性的存储,将它们更改为promises (而不是result)。在需要视图中的值的任何地方,我现在都在等待这些值。
这允许UI快速加载,并且只在需要的地方等待。
https://stackoverflow.com/questions/56117335
复制相似问题