My Vue app utilizes beforeRouteEnter to load data and prevent the undesirable "flash of unloaded content." Loading data on some pages is straightforward:
async beforeRouteEnter(to, from, next) {
const newestPosts = await getNewestPosts();
next(vm => vm.posts = newestPosts);
}
However, I am facing difficulty in implementing this with data that is stored in child components of the page.
For instance, consider the following structure:
<search-page>
<posts-list :query="$params.query">
</posts-list>
</search-page>
The <posts-list> component handles all the logic for fetching posts. It is responsible for generating the "related posts" box, displaying posts on the main search page, or presenting them on a user's profile page. This encapsulation of both fetching and rendering logic is quite nifty.
I would like to be able to do something like this in my beforeRouteEnter:
async beforeRouteEnter(to, from, next) {
await this.$refs.postsList.finishedPromise;
next();
}
Unfortunately, it seems that I will have to include all the fetching logic within the beforeRouteEnter function. This means duplicating the process for potentially every page, diminishing the usefulness of the <post-list> component. Is there any other viable solution? I am unsure if utilizing Vuex could solve this issue. While I understand how Vuex aids in managing state (e.g., "sidebar.open"), I am uncertain if it can assist in handling search results while allowing me to keep the fetching logic within the <post-list> component.