Vuex Mapstate Vs Mapgetters

Posted on  by admin

In vuex there is a helper function that shows up a lot. When I was first working with it, I had some babel issues preventing me from using ES6 syntax and as a result, I couldn’t use the function as intended.

Using the workaround helped me understand exactly what this small snippet was doing, so I thought I’d write it up.

As it turns out, there are a couple of things happening here.

One is what mapGetters does as a function, and the other is how the spread syntax transforms the result.

Let’s start by diving into the function itself. In our example the purpose of mapGetters is to map the result of store.getters.currentUser to the computed attribute currentUser.

This allows us to access the result of our getter function like so. As it turns out, mapGetters can take an object or an array. So this snippet, which is shown above.