When you are working with data in your Vuex store, you will often need to update it using a form. Vuex holds everything in state so that you can display it in multiple areas of your application while keeping things in sync.
Let’s look at an example of updating a user's name. To update the user's name, the standard approach is to dispatch an action. The action will commit a mutation to update the state.
You can’t update state directly, it needs to be handled via a mutation. To access the state, we can use a getter to fetch the current user’s name.
To have that name update in the Vuex store we then need to use a setter which will dispatch an action.
Here we have a basic auth Vuex state:. To update the authenticated user’s name we add the following computed property in our Vue template.
This works by binding to the input field using v-model for the name property.
Using Getters & Setters Vuex
With this in place we now have two-way data binding with the Vuex store. At first, it feels like quite a lot of code just to update one input field, but you soon get used to the pattern.
Update the name in that one form, and it will update everywhere in your application using the auth/authUser getter.
Modified2 years, 1 month ago. I have a Vuex state processState that has below getter.
I am watching this getter in two different components like below. Now when processState changes, getProcessState(newVal, oldVal) in only one component is invoked.
If I comment out the watch in the component in which it is invoked the other one starts working. So at one time only one is working.
Is there something about Vuex or watch I am missing that is causing this problem?
UpdateI tried watching the getter in a third component. but it is not also invoked.
Meena Chaudhary. 1212 gold badges4848 silver badges7979 bronze badges.