首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vuex actions 异步操作方法详解

Vuex actions 异步操作方法详解

2023-10-02 09:41:19 投稿：wdc

这篇文章主要介绍了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;
  }
}

到此这篇关于Vuex actions：异步操作详解的文章就介绍到这了,更多相关Vuex actions：异步操作详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！