Data (re)loading

[donnysim]

The data loading is done with beforeResolve and passed through route props, but how would you reload the data without reloading the page (for example, there's a refresh data button on the page)? or in some cases you have tabs that are persisted to url as query etc., how would I prevent data reload on query change?

I always used in component loading, but I kind of like that data is loaded before the component is shown as it removes the requirement to constantly add loader, or it can throw forbidden message before the page is opened etc., but the further I go, the more limitations and inconveniences I encounter with this approach.

[chrisvfritz]

The data loading is done with beforeResolve and passed through route props, but how would you reload the data without reloading the page (for example, there's a refresh data button on the page)?

In that case, I usually call the prop something like initialUser instead of user, and use that set a user data property. Then inside the component, you can update user with a method that calls a Vuex action like fetchUser to refresh.

or in some cases you have tabs that are persisted to url as query etc., how would I prevent data reload on query change?

If you don't want the page reloading on a query change, you'll probably want to change <RouterView :key="$route.fullPath" /> to <RouterView :key="$route.path" />.

---

Does that make sense?

[donnysim]

In that case, I usually call the prop something like initialUser instead of user, and use that set a user data property. Then inside the component, you can update user with a method that calls a Vuex action like fetchUser to refresh.

Was thinking this would be the case, but that leaves double memory usage? If, for example, a list size is 90 elements, and the user hits list refresh button, then there's 90 stale items in the initial state, and 90 in fresh items in data. Was kind of thinking if moving the list to Vuex would be better, but then there's no real reason to pass it through the props.

If you don't want the page reloading on a query change, you'll probably want to change to .

<router-link :to="{ query: { page: 1 } }">Test</router-link>

It still triggers the beforeResolve guard which loads the data again, even with a RouterView without a key. I might need to work something out for the beforeResolve from my usual approach with in component data loading with custom query watcher mixin, as for example going from /users to /users?page=1 or changing anything unrelated to the list should not trigger data reload etc., and see if I'm happy with the result.

[donnysim]

async beforeResolve(routeTo, routeFrom, next) {
  if (routeTo.name === routeFrom.name) {
    return next();
  }

  const response = await httpService.get(index());
  routeTo.params.list = response.data.data;
  next();
},

So figured I'd try skipping when updating the route and handle it in component, but NProgress loader still shows up and list prop becomes undefined.

[donnysim]

I also noticed that it's nice to add

    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
    }

because when you go back/pop history, the page jumps instantly to last scroll position, even if the data is still loading.

[donnysim]

Actually moved to Effector and loving the flexibility and usability compared VueX 😊still figuring out data fetching approach with beforeResolve, but have some ideas that might work.