DEV Community

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

Posted on

How to call API from Axios in Vuex store. 💾

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

After this you need to install Axios:

npm install --save axios vue-axios
Enter fullscreen mode Exit fullscreen mode

Import Axios on your store -> index.js

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

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Enter fullscreen mode Exit fullscreen mode

STEP TWO:

And now let's create👩‍💻:

1️⃣)Determinate your items.
export default new Vuex.Store({
  state: {
        items: [],
    },
Enter fullscreen mode Exit fullscreen mode
2️⃣)Your getter:
    getters: {
        items: state => {
            return state.items;
        }
    },
Enter fullscreen mode Exit fullscreen mode
3️⃣)Mutation of your items
    mutations: {
        SET_Item (state, items) {
            state.items = items
        }
    },
Enter fullscreen mode Exit fullscreen mode
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)
            })
        }
    },
});
Enter fullscreen mode Exit fullscreen mode

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';

Enter fullscreen mode Exit fullscreen mode
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')
    },
Enter fullscreen mode Exit fullscreen mode
3️⃣)Add mapState on your computed:

     computed: mapState([
        'items'
    ]),

</script>
Enter fullscreen mode Exit fullscreen mode
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>
Enter fullscreen mode Exit fullscreen mode

Hope I help you!
🙋‍♂️

Discussion (4)

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