Vue Map Actions

Posted on  by admin

Conclusion

Imagine that I have the following code:. In case I am leaving to use the method through the dispatch, however I needpass the this to the mapActions so I can run there in the store a redirectexample:. In the conventional method commented already it turned perfect, but wantedto use the mapActions feature, does anyone know how I canpass this, I know that to pass a parameter is just to passit inside the method, example:.

But if I pass: logout (this) in the vue template file, it understands that this is null. I’ve seen this link, but it’s not what I need:. Actions are similar to mutations, the differences being that:.

Instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations. Let's register a simple action:.

Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call context.commit to commit a mutation, or access the state and getters via context.state and context.getters.

We can even call other actions with context.dispatch. We will see why this context object is not the store instance itself when we introduce Modules later.

In practice, we often use ES2015 argument destructuring to simplify the code a bit (especially when we need to call commit multiple times):. Actions are triggered with the store.dispatch method:. This may look silly at first sight: if we want to increment the count, why don't we just call store.commit('increment') directly?

Remember that mutations have to be synchronous. We can perform asynchronous operations inside an action:.

Actions support the same payload format and object-style dispatch:. A more practical example of real-world actions would be an action to checkout a shopping cart, which involves calling an async API and committing multiple mutations:.

Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them.

You can dispatch actions in components with this.$store.dispatch('xxx'), or use the mapActions helper which maps component methods to store.dispatch calls (requires root store injection):.

Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows? The first thing to know is that store.dispatch can handle Promise returned by the triggered action handler and it also returns Promise:.

Now you can do:. And also in another action:. Finally, if we make use of async / await, we can compose our actions like this:. It's possible for a store.dispatch to trigger multiple action handlers in different modules.

In such a case the returned value will be a Promise that resolves when all triggered handlers have been resolved. 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. Can also be this. In the first case the name assignment is implicit, in the second it’s explicit.

But that’s the only difference. Now that we know what the function is doing, let’s break it down. I’m always in favor of having multiple different ways to understand concepts. So, I asked my coworker to read this post and his explanation of what mapGetters was doing went like this.

“The idea is to take a set of variables in your store object in a view controller, and map them to a top-level getter function you can call by name from the two way binding on the html page?”. Let’s say that we aren’t able to use the function or helper syntax at all.

In order to accomplish the same thing, what do we need to do?

We want to call our getter function, return the result and make that result accessible via some sort of name. So we’d do this. We’re creating a function and returning the result of our getter function inside of it. The result can be accessed using that function name, as in this example.

Keep in mind that the name we’re using is the name of the computed function, NOT the name of the getter method we’re calling.

Take this example where the names aren’t the same. In order to access the result, we’d reference otherName. A lot of this binding comes from Vue.

You can read more here. If you want to really deep dive, here is the source code for mapGetters. There is a lot here, and some of that is to handle the difference in the object versus array input, but the meat of it is in the mappedGetter function.

It takes the return object, and using the given key, assigns the result of the associated getter function to the value. Now that we understand the function itself, let’s turn our attention to the spread syntax. The key to understanding ..mapGetters really comes from recognizing that the function is designed to handle multiple getter calls at the same time.

The single use case we started with still works, but let’s look at this. We’re taking the result of our getter functions and assigning them to function variables we can reference inside our component.

It’s the same thing we did above, just for multiple getter calls at the same time.