Vuex Action调用接口获取数据并赋值Store状态问题排查

嘿，我一眼就看到问题所在啦——你定义了getData这个Vuex Action，但它并不会自动执行！Vuex的Action必须通过主动调用才能触发，应用挂载的时候不会自动跑你定义的Action，这就是为啥你的Axios请求完全没执行～

解决步骤分两步走： #

1. 主动触发Action #

你需要在Vue组件的生命周期钩子（比如created或mounted）里调用这个Action，用$store.dispatch方法：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  created() {
    // 触发getData Action
    this.$store.dispatch('getData')
  }
}
</script>

2. 修正Vuex的状态修改规范 #

另外，你的代码里还有个不符合Vuex规范的地方：不要在Action里直接修改state！Action的职责是处理异步逻辑（比如Axios请求），然后通过提交Mutation来修改state，这样Vuex的devtools才能正常追踪状态变化。

修改后的Store代码如下：

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

export const store = new Vuex.Store({
 state: {
  sample: 'foo',
  sample2 : [],
  sample3: []
 },
 getters:{ },
 actions:{ 
  getData(context){
   axios.get('/endpoint').then(function(response){
    // 提交Mutation来修改state，而不是直接赋值
    context.commit('UPDATE_SAMPLE', 'bar')
    context.commit('UPDATE_SAMPLE2', response.data.sample2data)
    context.commit('UPDATE_SAMPLE3', response.data.sample3data)
   });
  }
 },
 mutations:{ 
  UPDATE_SAMPLE(state, newValue) {
    state.sample = newValue
  },
  UPDATE_SAMPLE2(state, data) {
    state.sample2 = data
  },
  UPDATE_SAMPLE3(state, data) {
    state.sample3 = data
  }
 }
});

这样调整之后，当组件挂载时，created钩子会触发getData Action，Axios请求就会正常执行，并且状态修改也符合Vuex的规范啦～

内容的提问来源于stack exchange，提问作者Alatha Ntonga