vuex 处理异步请求的正确流程,辅助函数mapActions 在methods中解构

1.this.$store.dispatch('dispatchAct',"payload")
2.触发actions中的dispatchAct方法
actions: {
    //这里处理异步逻辑 然后提交到
    dispatchAct(item,payload){
      console.log(item,payload);
      fetch('/api/data/index.json')
      .then( (body)=> body.json() )
      .then( res => {
        //提交给mutations来进行处理 用来更改状态
        item.commit('incre',res.data)
      } )
    }
}
3.来更改状态
 mutations: {//方法 
    // 触发mutations需要使用commit方法对其进行唤醒
    // 一个事件类型type 对应 一个方法function(回调函数)
    incre:function(state,payload){
      console.log(state,payload);
      // 在mutations中触发异步操作是不合适的
      // 这是不合适的 不符合文档的规则的
      // fetch('http://chst.vip:8081/data/index.json')
      // .then( (body)=> body.json() )
      // .then( res => {
      //   console.log(res);
      //   state.arr = res.data;
      // } )
    }
 }
 methods:{
	...mapActions(['dispatchAct']),
}

 1. 在actions中定义一个类型，处理异步函数
 2. 在actions中获得异步结果之后，通过commit提交mutation，并将结果通过payload传递给mutation
 3. 在mutation中接收payload并且更改state的值