Vuex 4 — Actions and Components
Tags: vue, webdev, programming, javascript
Published: 2021-01-26 01:20:50

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


**Vuex 4 is in beta and it’s subject to change.**

Vuex is a popular state management library for Vue.

Vuex 4 is the version that’s made to work with Vue 3.

In this article, we’ll look at how to use Vuex 4 with Vue 3.

### Dispatching Actions in Components

We can map our actions to component methods with the `mapActions` method.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <button @click="increment">increment</button>
      <p>{{count}}</p>
    </div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment(state) {
            state.count++;
          }
        },
        actions: {
          increment({ commit }) {
            commit("increment");
          }
        }
      });
      const app = Vue.createApp({
        methods: {
          ...Vuex.mapActions(["increment"])
        },
        computed: {
          count() {
            return this.$store.state.count;
          }
        }
      });
      app.use(store);
      app.mount("#app");
    </script>
  </body>
</html>
```

We called the `Vuex.mapActions` to map our actions into a method.

We can also map it to our method with a name that’s different from the action.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <button @click="add">increment</button>
      <p>{{count}}</p>
    </div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment(state) {
            state.count++;
          }
        },
        actions: {
          increment({ commit }) {
            commit("increment");
          }
        }
      });
      const app = Vue.createApp({
        methods: {
          ...Vuex.mapActions({ add: "increment" })
        },
        computed: {
          count() {
            return this.$store.state.count;
          }
        }
      });
      app.use(store);
      app.mount("#app");
    </script>
  </body>
</html>
```

We passed in an object to `Vuex.mapActions` to map the `increment` action to the `add` method.

The key is the method name we want to map to.

### Composing Actions

Actions are often async. We can check that it’s done by returning a promise.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <button @click="increment2">increment</button>
      <p>{{count}}</p>
    </div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment(state, amount) {
            state.count += amount;
          }
        },
        actions: {
          async increment({ commit }) {
            return commit("increment", 1);
          },
          async increment2({ commit }) {
            await commit("increment", 1);
            return commit("increment", 2);
          }
        }
      });
      const app = Vue.createApp({
        methods: {
          ...Vuex.mapActions(["increment2"])
        },
        computed: {
          count() {
            return this.$store.state.count;
          }
        }
      });
      app.use(store);
      app.mount("#app");
    </script>
  </body>
</html>
```

We have the `increment2` action which dispatches the `increment` action with amount 1.

And then we dispatch it again with amount 2.

Since they’re promises and we awaited the first one, they’ll run sequentially.

### Conclusion

We can dispatch actions in different ways with Vuex 4.

Actions can be mapped to methods with `Vuex.mapActions` .