Vuex 4 for Efficient State Management

2.7 Using Mapping Functions

Over the past few lessons we've been talking about state, getters, mutations, and actions. Of course, all of these things are options that are directly inside of our Vuex data store. Now, each one of these things is very similar to options within our Vue components. Like for example, our state and our getters could be considered computed properties, especially getters. Because I made the direct comparison between a getter and the computed property. Because, well, that's what a getter is. But also if you look at mutations and actions, well, these are of course methods. And when you think about methods inside of a Vue components, we are typically updating state. Either that's all the methods are doing, like in the case of the mutation. Or we might be doing some kind of work and then updating data, which is what an action would be. Now, the reason why I mentioned this is because inside of our components, in the templates, whenever we directly access our Vuex store. Well, our templates become a little bit more muddy. They're more unclear, and they are certainly more verbose. And it's not that they are difficult to understand, but there is some translation that has to be done. Like for example, whenever we click on one of these links, we have to read, okay, we are committing this mutation. It's called selectList, which that's pretty self-explanatory, we are selecting the provided list. And that's easy to read. Or rather, it's easy to translate, but we do have to do some translation there. And one of the tenants behind Vue is to have simple and easy to read templates. So one way that we can clean these things up is to just write methods. Or computed properties that essentially wrap around the thing that we are trying to use within our Vuex store. Like for example, in the case of the selectList mutation, we could have a method that is simply changeSelectedList. We would pass in the provided list so that then we would have that method which would then access our Vuex store like this. Of course we need this in front of it. And that's great. Our template is a lot easier to read. However, we had to write the code to do that. And that does not make me happy. So thankfully Vuex gives us a set of helper functions that will map our state and our getters to really whatever we want to map them to, typically a computed property. And they also give us some helper functions to map our mutations and our actions to a component's methods. So let's look at how that would work. And this is a perfect component because we are using state in a couple of places as well as a mutation. So the first thing we need to do is import two functions. The first is called mapState. The second will be mapMutations. And these come from Vuex. We will talk about mapMutations first. So this basically allows us to map a mutation to a method. And we could do this in a couple of different ways. The first is to just go ahead and assign our methods to whatever mapMutations is going to return, which by default is an object. Now we can pass an array to mapMutations. And each element in this array can be the mutation that we want to map. So in this case, we can say that we want to map the selectList mutation to a method. And in this case, this gives us a method called selectList. So that we can pass in list. And there we go. If we go back to the browser, let's do a hard refresh. We can click on our Lists, and we can see that everything is working as it should. And in a lot of cases this is going to work just fine. But there are some cases where we might have a method that we need to define that we are using somewhere else. In which case, we could just do this. We'll use the object spread operator. We'll once again call mapMutations. And then we will pass in that array that has selectList. So now our component can still have its own methods that we write. And we can also map in the mutations that we would want to use inside of this component. Now we don't have to use the names of the mutations as our method names if we don't want that. If we want a different method name, then we need to pass in an object to the mapMutations method. And then we will specify the name of the method that we want to use. Like in this case we could say, changeSelectedList. And then the value for this would be the mutation that we want to map to it, in which case it would be selectList. So then we would need to use this changeSelectedList as our method name, whenever we click on the link. And once again, everything is going to work just fine. So that is mapMutations. Now we need to map our state. So it's the same concept except that we are going to use computed properties here. And we would use it essentially the same way. So if the only computed properties that we need are actually coming from our state, we could call mapState. And then pass in an array that contains the state items that we want to map. So that would be lists and the selectedListId. Well, we could also do the same thing like we did with the mapMutations. And that if we wanted to change the name of the properties that we were working with, instead of passing in an array, we would pass in an object. Where the property name would be the property name that we want to use within our component. And then the value will be the name of the property in our state. I'm going to leave it like this, however. So that we can see mapMutations and mapState. Even though that they can be used in the same way or at least using the same syntax, this way we can have both of those syntaxes displayed here. So now we can change what we have inside of our templates so that we can have our lists here. And then we can have the selectedListId there. Let's go back to the browser. Let's do a hard refresh. And once again, everything works exactly as it should. So let's go to our items components. The only thing that we are using here is our selectedItems. So in this case, this is a getter, we would want to import the mapGetters function. This is of course coming from Vuex. We use it just like the other map functions. So since computed is already here, we will just use the object spread operator to map the getter. And we will simply just specify these selectedItems there. That way if we have any other computed properties that we want to define that are specific to this component, we can do so. And now we can just use that selectedItems in our templates. Once again, let's go back to the browser, hard refresh, everything works like it did before. Now, of course, this is one of those features that you don't have to use if you don't want to. However, I tend to do so because I like to have very clean templates. And these helper functions certainly make it a lot cleaner than directly using our Vuex store in our template.