Vue+Vuex调用API时遇TypeError：无法读取undefined的dispatch属性求助

嘿，我来帮你搞定这个问题！你遇到的这个错误，根源在于调用getUsersList方法时没有传入正确的Vuex store实例，导致方法里的store参数是undefined，自然没法调用dispatch方法。

错误原因分析 #

在login.vue的created钩子中，你直接调用了getUsersList()，但这个方法在loginAction.js里明确需要接收store作为参数。你没有传递这个参数，所以方法内的store变量就是undefined，触发了这个类型错误。

解决方案 #

我们可以用两种更规范的方式来触发Vuex的action，彻底避免手动传递store的问题：

方式一：利用组件内的this.$store触发action #

修改login.vue的代码，直接通过this.$store.dispatch调用action，同时调整action的写法适配Vuex标准：

<script>
import { getUsersList } from './loginAction';
export default {
  created () {
    try{
      // 直接通过$store.dispatch触发action
      this.$store.dispatch('getUsersList');
    }catch(e){
      console.log(e);
    }
  },
  vuex: {
    getters: {
      userResponse: state => state.userResponse
    },
    actions: {
      getUsersList
    }
  }
}
</script>

调整loginAction.js的action写法（使用Vuex标准的context参数，包含dispatch、commit等方法）：

export const getUsersList = function (context) { 
  let url = '/Apis/allUsers'; 
  Vue.http.get(url).then((response) => { 
    // 直接通过context.commit提交mutation，比dispatch更直接（无需再触发其他action时）
    context.commit('GET_USER_RES', response.data); 
    if (response.status === 200) { 
      // 这里可以添加请求成功后的额外逻辑
    } 
  }).catch((error) => { 
    console.log('请求失败', error) 
  }) 
}

方式二：使用Vuex的mapActions辅助函数（更简洁） #

如果想让组件内的调用更清爽，可以用mapActions自动映射action到组件实例：

<script>
import { mapActions } from 'vuex';
import { getUsersList } from './loginAction';
export default {
  created () {
    try{
      // 直接调用映射后的方法
      this.getUsersList();
    }catch(e){
      console.log(e);
    }
  },
  vuex: {
    getters: {
      userResponse: state => state.userResponse
    },
    actions: mapActions([
      'getUsersList'
    ])
  }
}
</script>

这种方式会自动帮你处理store的绑定，不需要手动传递参数。

额外注意事项 #

• 确保你的Vuex store已经正确注入到Vue根实例中（在main.js里有new Vue({ store })这样的代码），否则组件内拿不到this.$store。
• 检查loginStore.js里的mutation名称GET_USER_RES和action里调用的commit方法名完全一致，避免拼写错误导致mutation不生效。

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