vuex and axios debugging

Question

I'm going crazy, I have a working api that sends data, I connected it to a VueJS app and it was working fine. I'm trying to implement Vuex and I'm stuck. Here's my store.js file

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);

const state = {
        message: "I am groot",
        articles: []
    }
const getters = {
        getArticles: (state) => {
            return state.articles;
        }
    }
const actions = {
          getArticles: ({ commit }, data) => {
            axios.get('/articles').then( (articles) => {
                commit('GET_ARTICLES', articles);
                console.log(articles); // Trying to debug
            }, (err) => {
                console.log(err);
            })
          }
    }
const mutations =  {
        GET_ARTICLES: (state, {list}) => {
            state.articles = list;
        }   
    }
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    mutations
});
console.log(store.state.articles); // this lines works but data is empty
export default store

The console.log within axios call doesn't run and store.state.articles is empty. I must be missing something. I'm just trying to console the articles data on page load...

Please help, I'm near insanity :)

Component :

<template>
  <div class="container">
    <h1>Test component yo !</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
    export default {
        name: 'Test',
        computed: {
            message() {
                return this.$store.state.message
            }
        },
        mounted: () => {
            this.$store.dispatch('getArticles')
        }

    }
</script>

App.js :

import Vue from 'vue';
import ArticlesViewer from './articles_viewer.vue';
import UserArticles from './user_articles.vue';
import App from './app.vue'
import store from './store'

new Vue({
  el: '#app-container',
  store,
  render: h => h(App)
})

yeah, you've defined your state.articles to be an empty array. It won't populate until you make the axios call — thanksd
– thanksd, Commented May 11, 2017 at 20:28
vuejs.org/v2/guide/instance.html#Properties-and-Methods. Scroll down til you see the warning about arrow functions. — Eric Guan
– Eric Guan, Commented May 11, 2017 at 20:53

tony19 · Accepted Answer · 2022-07-15 22:22:49Z

3

You define the mounted lifecycle hook of your component using an arrow function.

As per the documentation:

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

You should define it like so:

mounted: function () {
  this.$store.dispatch('getArticles');
}

Or, use the ECMAScript 5 shorthand:

mounted() {
  this.$store.dispatch('getArticles');
}

Now, your dispatch method will be called correctly, populating your articles array.

edited Jul 15, 2022 at 22:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 11, 2017 at 20:57

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuex and axios debugging

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related