DEV Community

loading...
Cover image for How to call API from Axios in Vuex store. 💾

How to call API from Axios in Vuex store. 💾

ljnce profile image Luca ・2 min read

Hi Dev Friends! 🤠

In this.tutorial i will show you in which mode you can use Axios with Vuex, and call it on you file.Vue.

STEP ONE:

First of all you can add Vuex on your project:

0️⃣) I suggest you to add this, during the installation of Vue.cli, via "manual installation":

vue create project

Alt Text

Alt Text

After this you need to install Axios:

npm install --save axios vue-axios

Import Axios on your store -> index.js

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex)
Vue.use(VueAxios, axios)

STEP TWO:

And now let's create👩‍💻:

1️⃣)Determinate your items.
export default new Vuex.Store({
  state: {
        items: [],
    },
2️⃣)Your getter:
    getters: {
        items: state => {
            return state.items;
        }
    },
3️⃣)Mutation of your items
    mutations: {
        SET_Item (state, items) {
            state.items = items
        }
    },
4️⃣)Action for call your API on you file.Vue
    actions: {
        loadItems ({ commit }) {
            axios
                .get('Your API link', {
                    headers: {
                        'Ocp-Apim-Subscription-Key': 'your key',
                    }
                })
                .then(response => response.data)
                .then(items => {
                    console.log(items);
                commit('SET_Items', items)
            })
        }
    },
});

STEP THREE:

Now it's time to call your "items" on your file.Vue:

1️⃣)Import you mapState from vex:
   <script>

import { mapState } from 'vuex';

2️⃣) With mounted you can stamp your API, and use "dispatch" method to call the "action" (the difference with mutations is you can use "mounted" method).

    mounted () {
        this.$store.dispatch('loadItems')
    },
3️⃣)Add mapState on your computed:

     computed: mapState([
        'items'
    ]),

</script>
4️⃣)Compile you template with your API.
<template>
  <div class="my-items">
    <div v-for="item in items" :key="items.id">
       // Your v-for...
    </div>
 </div>
</template>

Hope I help you!
🙋‍♂️

Discussion (4)

pic
Editor guide
Collapse
alfirian_49 profile image
Jesús

U can access to the getter as below:

computed: {
// mix the getters into computed with object spread operator
...mapGetters([
'items',
])
}

Then you can use in your tag:

<div v-for="item in items" :key="items.id">
// Your v-for...
</div>

Collapse
ritikpatni profile image
Ritik Patni

Is it not possible to import vue-axios in main.js alone as it is suggested in the docs and then be able to use it in actions because in your current approach you don't need vue-axios and can do with just importing axios

Collapse
miguelcarrillo profile image
Miguel Carrillo

Small typo: in mutations should be "SET_Items"

Collapse
enomartins profile image
Enomartins

Really very helpful and easy to understand
Thanks