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

【问题标题】：vuejs component created wait for data to load firstvuejs 组件创建等待数据首先加载
【发布时间】：2018-04-04 02:06:09
【问题描述】：

我有一个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 组件，它是所有组件的父组件，而不是特定于路由的组件。

【问题讨论】：

标签： vuejs2 vue-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

这不是 Vue 的做事方式。

使用 VUEX 存储您的 currentUser 对象
在 App.vue 的计算部分设置 Vuex getter。数据准备就绪后，您的模板将动态更新。

请参阅page 中的 mapGetters 部分。它与计算机制配合得很好。

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

【讨论】：

如果子组件也需要获取依赖于父数据的数据怎么办？

【解决方案3】：

如果使用vue-router，您可以使用beforeRouteEnter 保护来异步加载数据，如下所述：https://router.vuejs.org/en/advanced/data-fetching.html

【讨论】：

是的，但这是 App.vue 组件，因为它没有连接到任何路线，所以它不起作用，或者至少我无法让它工作。
@Nikola 可能使用isFetched state 之类的东西，并在获取状态后使用 v-if 进行渲染？

【解决方案4】：

我能想到的一种方法是当用户被加载到App.vue 组件中以检查当前路径以及是否为\login 进行重定向。

类似这样的：

created() {
  AuthService.getCurrentUser()
  .then(user => this.setCurrentUser(user))
  .then(() => {
    const { path } = this.$router.currentRoute;
    if (path === '/login') {
      this.$router.push('/');
    }
  });

【讨论】：