vuex 和 axios 调试

Question

我快疯了，我有一个可以发送数据的工作 api，我将它连接到 VueJS 应用程序并且工作正常。我正在尝试实施 Vuex，但卡住了。这是我的 store.js 文件

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

axios 调用中的 console.log 不运行并且 store.state.articles 为空。我肯定错过了什么。我只是想在页面加载时控制文章数据...

请帮忙，我快疯了:)

组件：

<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)
})

Answer 1

您使用箭头函数定义组件的 mounted 生命周期挂钩。

根据 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.

你应该这样定义它：

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

或者，使用 ECMAScript 5 shorthand:

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

现在，您的 dispatch 方法将被正确调用，填充您的文章数组。

vuex 和 axios 调试

vuex and axios debugging

javascript

vue.js

axios

vuex