Question

我有一个Vue应用程序，正在使用beforeRouteEnter加载数据，并避免了“未加载内容的闪烁”。在某些页面上，这很容易：

 async beforeRouteEnter(to, from, next) {
    const newestPosts = await getNewestPosts();
    next(vm => vm.posts = newestPosts);
}

但是，当数据位于页面的子组件中时，尚不清楚如何使它正常工作。

让我们说我有这样的结构

<search-page>
  <posts-list :query="$params.query">
  </posts-list>
</search-page>

<posts-list>具有查询帖子的所有逻辑。它用于构建“相关帖子”框或主要搜索页面-或显示在用户的个人资料页面上。封装获取和呈现逻辑是很不错的。

我希望我可以在beforeRouteEnter中做一些事情，例如：

 async beforeRouteEnter(to, from, next) {
    await this.$refs.postsList.finishedPromise;
    next();
}

但是相反，我必须将所有获取逻辑放入beforeRouteEnter函数中。但这意味着我必须为每个页面都这样做-删除<post-list>组件的某些实用程序。那是唯一有效的解决方案吗？我不太确定vuex是否可以作为解决方案。我了解vuex如何帮助状态（例如EG“ sidebar.open”），但是它可以帮助我将获取逻辑保留在<post-list>中，从而有助于管理搜索结果？

Answer 1

如果获取帖子所需的数据包含在$params.query中，则一种方法是将query的{{1}}属性放在posts-list组件中。看到更改时，posts-list可以确定它是否代表获取原因，并在设置某种加载占位符（例如漂亮的watch）之后异步执行，这是对空状态的一种很好的视觉折衷。

我将避免尝试干扰路由更改，而是考虑如何在“需要知道”的组件中使用反应性逻辑skeleton loader。

Vue beforeRouteEnter等待子组件完成请求

1 个答案: