Modify State by using Vuex Mutations with TypeScript
Mutations are the only way to modify application state. They make updating state in an atomic and synchronous way easy to reason about.
This lesson will show you how to modify state by using Vuex Mutations. We will add type-safety with TypeScript using the @Mutation decorator (imported from vuex-class).
Start by adding a new todo object, which we will use to create new todo items. Let's initialize it with an empty text and a false Boolean for the check property. Then we can go up to the template and, in there, we can use an input using the vue model to bind a new todo.txt to the input.
Then we when press enter, we want to call an add todo mutation that we're about to implement. Let's go to that todo [inaudible 0:34] . In there, let's add the mutations. As the getters, they are also functions that take the state as a first parameter.
As the second, they pay the payload, which, in this case, is the new todo. We can access todos already from the state and push the new todo there. The state is typed as any by default, so we have to use the mutation tree to type it, just as the getters.
Let's first import it, and then we can use it passed in the state as a first parameter of the generic. If we inspect now the state, we see it's typed, meaning now we get type safety in our mutations.
Just as the state on the getters, we have to add the mutations to the store. Go to the index.ts file, import it, and add it to the vue [inaudible 1:33] instance. Now we are ready to use the mutation, so let's go to the app component and import the mutation decorator there. We don't need the state operator, so let's remove it.
You see this is as simple as writing the variable name of the mutation. Let's try this out. Write something, press enter, and you'll see that nothing's shown. That's because we are not passing the new todo to the mutation. Let's go up to the template and pass the new todo object. If we try this again, we see it's working.
If you continue typing, you see that, strangely, that todo item is changing, as well. That's because we're adding a reference to the new todo object. Instead, we have to make a copy of that. Let's go back to the add todo mutation, and add a todo copy variable.
We can use object assign to create a copy of that object. Then we can use that copy instead. Let's try this again. Reload the page, then write something, and press enter. This time you see it's working.
First it passes the object that it's being used for the input value, and object are passed by reference, so it's always the same one. That's why you need to create a new one.
Did not fully get how making a copy of newTodo object, made the @keyup.enter work? Is it because the newTodo argument inside addTodo is referencing the reactive DATA property of that vue component?