If I have multiple components with input fields in vue router, how should I fetch data and store it in vuex?

Question

In my vue cli project I have a route Settings with 3 child components SettingsA, SettingsB and SettingsC. Each child component has ca. 15 input fields, so it would be too many input fields for one single component.

The goal is to get data from a REST backend with an an axios call when the Route Settings is loaded, and populate some of the input fields with the data;
the user can then navigate between the child components and fill/change the input fields, without triggering the axios call which would reload and overwrite the users input field changes.

Since there are 3 child components I use vuex as store. That way the users inputs should not change when he navigates between the child components.

My question is: Where and with what hook should I make the axios call? With beforeMounted on the Settings Component?

Maybe there is also a better, already tried design than mine?

Thanks for your help!

Answer 1

Solution using custom events

You actually not necessarily need vuex. Basic idea is to have parent component Settings, which includes SettingsA, SettingsB and SettingsC, which are displayed conditionally using v-if. The Settings component is holding your state. Changes in the child components form fields trigger events with this.$emit(). The parent component listens to the events and updates its state. The state of the form is passed down via props.

Solution using Vuex actions

If you go the Vuex route, you will trigger actions instead of using this.$emit() and update the global store. You should import the actions using mapActions. In your components you then have access to the global store using this.$store.