Vuex-actions：异步操作

作用：异步操作写在actions中，自身无法修改state中的数据，只能提交方法给mutations，通过mutations修改state中的数据

• 需要通过dispatch提交异步
• actions中接收异步，内部有一个参数context相当于store，可以通过context.commit提交同步
• mutations中接收同步，在对state中的数据进行修改

// state中定义一些初始数据用来举例
state: {
  // 定义一个数字
  count: 0,
  // 定义一个对象
  coderyg: {
    name: 'coderyg',
    age: 25,
    height: 1.93
  },
  // 定义一个字符串
  info: 'swk'
}

实例1：普通用法(需求：3s后修改info为zbj)

// App.vue
<p>{{ $store.state.info }}</p>  //此时info是swk
<button @click="update">3s后修改info</button>
// dispatch提交异步
update() {
  this.$store.dispatch('aUpdate');
}

// index.js
// actions接收异步
actions: {
  // 这里的context可以当作store，通过context.commit提交同步
  aUpdate(context) {
    setTimeout(() => {
      // 提交同步
      context.commit('mUpdate');
    }, 3000)
  }
},
// mutations接收同步
mutations: {
  mUpdate(state) {
    state.info = 'zbj'
  }
}

实例2.1：直接提交一个大对象携带数据

// App.vue
<p>{{ $store.state.info }}</p>  //此时info是swk
<button @click="update('zbj')">3s后修改info</button>
// dispatch提交异步
update(info) {
  this.$store.dispatch(这里开始{
    type: 'aUpdate',
    info
  }这里结束是payload);
}

// index.js
// actions接收异步，传递过来的payload作为接收的第二个参数
actions: {
  aUpdate(context, payload) {
    setTimeout(() => {
      // context.commit提交同步
      context.commit('mUpdate', payload);
      console.log(payload);
    }, 3000)
  }
}
// mutations接收同步
mutations: {
  mUpdate(state, payload) {
    state.info = payload.info;
  }
}

实例2.2普通提交后面携带多个参数

// App.vue
update() {
  // 提交异步
  this.$store.dispatch('aUpdate', 从这开始{
    message: 'hello vuejs',
    success: () => {
      console.log('提交成功');
    }
  }到这结束是payload)
}

// index.js
actions: {
  // 接收异步
  aUpdate(context, payload) {
    setTimeout(() => {
      // 提交同步
      context.commit('mUpdate', payload);
    }, 3000)
  }
},
mutations: {
  // 接收同步
  mUpdate(state, payload) {
    // 修改数据
    state.info = payload.message;
    // 调用方法
    payload.success();
  }
}

实例2.3通过Promise优雅提交，使用dispatch提交异步时，接收异步请求使用Promise，当在Promise内部调用resolve()方法，则可以在dispatch后跟上then()方法

// App.vue
update() {
  // 提交异步
  this.$store
    .dispatch('aUpdate', 从这开始{
      message: 'hello vuejs',
      success: () => {
        console.log('success');
      }
    }到这结束是payload)
    // 这里调用.then
    .then(res => console.log(res))
}

// index.js
actions: {
  // 接收异步
  aUpdate(context, payload) {
    // 直接return Promise
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 提交同步
        context.commit('mUpdate', payload);
        
        // 调用方法测试
        payload.success();
        
        // 调用resolve
        resolve('res');
      }, 3000)
    });
  }
},
mutations: {
  // 接收同步
  mUpdate(state, payload) {
    state.info = payload.message;
  }
}