Split Vuex Store into Modules using TypeScript

Start by adding a modules key into the Vuex [inaudible 00:03] . Each module has its own state, getters, mutations, and actions, so we don't need these properties here any more. [inaudible 00:14] assuming that's a module and add it there.

Now go to the Todos file and export a todos constant in here. It has the state, the getters, the mutations, and the actions. As simple as that, this is the todos module.

If we run this, we see this. We see this is working exactly the same way. That's because the state, when we refer it from the mutations, the getters, it's local to the state of this module, so they are self-contained. Let's see that [inaudible 00:53] by creating another module. Call it Login. There import the getter tree, a mutation tree, from Vuex.

Then support the Login module and add the state and the mutations which we are going to implement. First, define a state; state has a user, it's an empty string, and its loggedIn property. We don't have a type yet for the state, so first let's assume there is a login state in the Types file and import it so we can use it here for the state.

Let's go to the Types file and implement it there. Let's better rename the state interface to todos state, because we use it for the todos, and then declare a login state which has a user as a string and its login property as a boolean. Now go to the Todos file and rename all the state instances to todos state which we have just renamed.

We are using it to type the state, their getters, the mutations, and the actions. Now back to the Login module. Implement a mutations constant. Type it as mutationThree, as in the login state, and write a login mutation. Login is going to set its login property to true and user [inaudible 2:46] .

Probably, in a real lab, you will do this in two different mutations and using an action to call both, but for the purpose of this example, this is quicker. Again, this state is local to the module. Now that we have created the module, let's go back to the StoreIndex file and import the Login module, then add it to the module scheme. Let's save this and run it.

If we open the vuex-devtools and check the vuex state, we will see that it's divided by module. This is one todos state and another login one, and inside they have the local module state. Now let's go back to the App component. Now we're going to use the new login module there to first create a button that is visible only when it's not logged in.

We'll use it to simulate a fake login [inaudible 3:53] and a text, which is visible when it's logged in, displaying the name. Now import the state decorator from Vuex class and we'll use it to get the login state. Use the login state type that we created and import it from the Types file. Also declare the login mutation.

We'll need to specify the key, because the login name is already taken by the state, so we can call it loginMutation. Let's go up to the template and in the button, we'll say that when we click it, we trigger the login mutation. When we click the bottom, we'll see the mutation is triggered and the text with the user is displayed.