创建vuejs组件等待数据首先加载

Question

我有一个App.vue组件,我想加载当前登录的用户.我还想在用户尝试登录路线时重定向用户,并且当前登录的用户已经保存在上下文中(他已经登录).

// inside App.vue component
created() {
  AuthService.getCurrentUser().then((user) => {
    this.user = user;
  });
}

我检查created了登录组件的方法是否设置了currentUser,但是当用户尝试转到登录页面时,可能是当前用户的请求未完成.

我的问题是:

在App.vue组件加载之前,如何等待数据加载？我看到这样的事情:

waitForData: true,
data(transition) {
  return AuthService.getCurrentUser().then(currentUser => {
    transition.next({ currentUser });
  });
}

实际上并没有等待加载数据并且组件仍然加载.

编辑:我知道beforeRouteEnter但这App.vue是一个组件,它是所有组件的父组件,而不是特定于路由的组件.

Answer 1

我遇到了一个非常类似的问题,并通过在包含依赖于加载数据的子组件的元素上添加v-if来解决.然后当然有一个数据属性来控制v-if.如果您没有包装元素,则始终可以使用模板元素进行包装.

Answer 2

这不是Vue的处理方式。

1. 使用VUEX存储currentUser对象
2. 在App.vue的计算部分中设置Vuex吸气剂。数据准备好后，您的模板将动态更新。

请参阅本的mapGetters部分页面。它与计算机制非常兼容。

您也可以在相关组件中使用v-if，以便在VUEX中准备好数据之前不会创建该组件。