One important thing to know about Vuex is that, even though the global state is accessible from any of our components, we should not directly mutate or modify it. To modify the content of our user, we will need to create something called mutations. Mutations are methods that have one single job: to accept a value or payload and to commit a modification to the state. That way, Vuex can keep tabs on which components are making modifications to the state without it becoming highly chaotic!
Let's create our first mutation; we will call it updateUser.
This mutation will take two parameters: the first one is state. Every mutation will always receive the state as the first parameter; it is injected to mutations by Vuex by default. The second parameter will be the value that that mutation will get when you call it—in this case, we will...