I’m digging into my first large Vue + Vuex application, and naturally I need to fetch data from a backend server in order to hydrate my application’s state. Think of an account-based app that saves your customer information, orders, etc.
My question is what are the best practices for fetching data and hydrating the app’s vuex store state? I’m clear that actions should perform the async fetching, and mutations will be committed on fetch complete in those actions. Where should I be dispatching these actions?
So far, my root app component uses the
created hook to dispatch each fetch (fetchUserProfile, fetchOrders, etc.). This works just fine, and my components simply re-render as data is pulled into the store.
Is this the best practice? Using the
beforeCreate hook seems risky because data observation hasn’t been performed yet. Having my store perform the fetch also seems wrong, as it feels more like the responsibility of the app’s components to request data (this could make my store more reusable in other contexts when we perhaps don’t need to fetch something like orders).