Simplifying with mapMutations and mapActions

The final features we'll cover are very similar to the previous one: mapMutations and mapActions. As you can probably guess, these two features work very similarly to mapState and mapGetters, in that they provide a shorthand way to connect your code to Vuex mutations and actions without writing boilerplate code.

They follow the exact same format in that you can specify a list of items to map or specify a list while also providing a different name, as in the following example:

mapMutations(["setBooks"]);
mapActions(["loadBooks"]);

These can be used in your Vue component's methods block:

methods:{
    ...mapMutations(["setBooks"]),
    ...mapActions(["loadBooks"])
}

This then allows your Vue code to call either setBooks or loadBooks without specifying the store object, or dispatch and commit.

Now, let's try to create a simple...