Handle Forms Connected to a Vuex Store using TypeScript
v-model uses 2 way binding to make local state easy to update and connect variables to an input or component, in an implicit way. At the same time, that makes it difficult to combine it with Vuex, since getters and mutations/actions must be called explicitly.
This lesson shows you how you can apply the v-model functionality to a Vuex store by doing it in explicitly in 2 steps on a class-based component using TypeScript.
We're going to implement the check feature for the to-dos. For that, let's try view model. First go here and write an input checkbox. Same view model equal to-do checked. Fix the indentation. Let's copy this input back, and paste it further down this list. Then change the view model to done.
Let's try this. Click on the checkboxes, and you see they are changing. We may think this is working correctly, but if we check the state, let's check for example the getters. The state doesn't change at all. This is because view model is changing the local state of that variable. What we want to do is to trigger a motation.
Go to the to-dos file, where we have the motations, and add toggle to-do. Then the only thing we have to do is to invert the checked property. Now, we need to go back to the app view component, and declare the toggle to-do motation.
What we have to do is, instead of using view model, do it in two steps. First, let's use the checked property to bind that value. Then use the change event to call the motation. In this way, we are replicating the view model functionality, but by controlling ourselves how to get the data from, and what to do to change it.
Don't forget to update the DOMs list. Let's try this again. Scroll down to the getters, and then click the checkboxes, and we'll see the state is changing. This is working as we expect.