How to Use Axios with Vuex
Tags: vue, webdev, programming, javascript
Published: 2021-01-26 01:25:42

**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 is a state management library for Vue apps.

It’s the most popular choice for state management for Vue apps.

In this article, we’ll look at how to use the Axios HTTP client with Vuex.

### Run Async Code with Actions

We can run async code in a Vuex store within actions.

To add an action, we just add the `action` property into the object we pass into the `Vuex.Store` constructor.

For example, we can write:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.config.productionTip = false;
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  }
});

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");
```

to add the `actions` property with the `increment` method.

The `context.commit` method commits the mutation we want to change the state.

Then we can dispatch the action in our component with the `this.$store.dispatch` method:

`App.vue`

```
<template>
  <div id="app">
    <button @click="increment">increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch("increment");
    }
  }
};
</script>
```

Since actions can have async code in it, we can just add the async code we want in the action method.

The code can update the state.

To use Axios to make a request in our action, we write:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import axios from "axios";

Vue.config.productionTip = false;
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    post: {}
  },
  mutations: {
    setPost(state, data) {
      state.post = data;
    }
  },
  actions: {
    async getPost(context, { id }) {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      context.commit("setPost", data);
    }
  }
});

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");
```

`App.vue`

```
<template>
  <div id="app">
    <button @click="getPost">get post</button>
    <p>{{post}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    post() {
      return this.$store.state.post;
    }
  },
  methods: {
    getPost() {
      this.$store.dispatch("getPost", { id: 1 });
    }
  }
};
</script>
```

The difference is that we have the `getPost` async method to make the request to the API.

Then once we have the result, we call `context.commit` to commit the `setPost` mutation to update the state.

In the `setPost` mutation method, we get the `data` parameter’s value and then set it as the value of `state.post` to update the `post` state.

In `App.vue` , we dispatch the `getPost` action with the `this.$store.dispatch` method the same way. 

Just that we add an object with the `id` property to pass it to the `getPost` action method as the 2nd parameter.

In the `post` computed property, we return the value of the `this.$store.state.post` property.

Now when we click the get post button, we should see the post data displayed from the `post` state via the `post` computed property.

### Conclusion

We can use Axios with Vuex as long as we put the Axios code in the Vuex store action.

An action method can have async code but mutations can’t.