Vuex中actions何时完成及后续业务逻辑调用

最新推荐文章于 2022-01-11 19:52:49 发布

原创最新推荐文章于 2022-01-11 19:52:49 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文探讨了在Vuex中如何正确处理actions的执行顺序，特别是涉及异步操作如getPosition和getAddress时，如何确保state更新后再进行后续业务逻辑。通过利用actions返回的promise并使用.then()来控制调用顺序，解决了这个问题。同时提到了mapActions的使用，并提供了参考文档链接。

先上问题，我的需求是在调用actions中的getPosition来获取经纬度，从而修改state中的值，再通过state中的经纬度发起getAddress获取当前位置的请求，这就关乎到一个调用时机的问题

	 // 获取经纬度
    async getPosition({commit}, that) {
      const { data: res } = await that.$http.get('https://elm.cangdu.org/v1/cities?type=guess')
      commit(RECEIVE_POSITION, {latitude: res.latitude, longitude: res.longitude})
      console.log(res.latitude, res.longitude)
    }

// 获取地址
    async getAddress({ commit, state }, that) {
            const url = `position/${state.latitude},${state.longitude}`
            const { data: res } = await that.$http.get(url)
            if (res.code === 0) {
                commit(RECEIVE_ADDRESS, { address: res.data })
            }
    }

如果是当前这样同步调用的话，就会出现state中经纬度的值还没获取或修改，就已经调用修改的值，发起请求，但不会报错，只是请求失败而已

	this.$store.dispatch('getPosition')
	this.$store.dispatch('getAddress')

解决方案及总结

经过查阅资料得知，dipathch返回的是一个promise对象，所以就可以通过.then的方式来解决这个执行时机的问题

	this.$store.dispatch('getPosition')
	.then(() => {
    	this.$store.dispatch('getAddress')
    )

通过箭头函数的方式，确保this指向，任然能够接受commit和state变量
通过mapActions映射也是一样，mapActions还是会映射为dispatch的方式

	const that = this//这里传入vue实例对象，不清楚可以参考一下我的上一篇关于VUEX中访问vue实例对象的文章
    this.getPosition(that).then(() => {
      this.getAddress(that)
    })

如有错误，请各位多多指教，谢谢啦