Vuex actions 异步操作方法详解

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

// 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'
  }
}

// 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;
  }
}

// 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();
  }
}

// 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;
  }
}