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, May 11 '17 at 20:28
I'm really confused I think I didn't understant Vuex well. I have a test component, how should I call getArticles ? I tried "this.$store.dispatch('getArticles')" in the beforeMount() but it says "Cannot read property '$store' of undefined" — Martin B, May 11 '17 at 20:34
`this` should not be undefined in the `beforeMount()` hook. Can you update your question with the relevant test component? — thanksd, May 11 '17 at 20:39
My component is loading on the page, I get the message variable displayed even — Martin B, May 11 '17 at 20:46
Ok it works ! how come it doesn't support ES6 syntax ?? However the console.log(store.state.articles); still doesn't work but console.log(store.state.message); does is it normal ? — Martin B, May 11 '17 at 20:49
https://vuejs.org/v2/guide/instance.html#Properties-and-Methods. Scroll down til you see the warning about arrow functions. — Eric Guan, May 11 '17 at 20:53
thanks guys, I'll read that doc more till I understand this Vuex madness — Martin B, May 11 '17 at 20:59
Possible duplicate of [VueJS: why is "this" undefined?](http://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) — thanksd, May 12 '17 at 05:07

score 3 · Accepted Answer · edited Jul 15 '22 at 22:22

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.

vuex and axios debugging

1 Answers1