vuex中设计回调函数，等数据加载完成之后渲染

最新推荐文章于 2023-07-18 23:48:11 发布

原创最新推荐文章于 2023-07-18 23:48:11 发布 · 766 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

本文详细介绍了在 Vue.js 应用中使用 Vuex 进行异步数据请求时遇到的问题及解决方案。原来的设计中，回调函数未被正确执行，原因是Vuex action 只接受一个参数。通过调整，将回调函数与数据一起封装到一个对象中传递，解决了问题。修改后的代码确保了数据加载完成后能够正确触发重绘坐标图的回调函数。

业务需求：切换日期重绘坐标图
在这里插入图片描述

错误案例

开始是这样设计的

 computed: {
    ...mapState(["PublicDateList"]),
  },
  methods: {
    ...mapActions(["PublicNumDaily"]),
    handleChange: function () {
      // 设计回调函数，在数据加载完成之后执行函数,
      this.PublicNumDaily(Number(this.time),Number(this.time))
    },
    // 重新绘制
    paint: function () {},

action.js

async PublicNumDaily ({commit},cur_day,cb) {
    let result = await ReqPublicNumDaily(cur_day)
    console.log('发送请求获取数据')
    if(result.code === 0){
      console.log('分发action 这是callback',data)
      commit(RECEIVEDATAColletion,result.data)
      cb && cb()
    }
  }

发现回调函数不会执行，后来打印回调函数，发现是undefined。

正确案例

上面原因分析：
vuex中调用action的时候只有第一个参数有效，所以应该把两个数据包装到一个对象中
改进

 handleChange: function () {
      // 设计回调函数，在数据加载完成之后执行函数,这里需要注意action只能传一个参数，所以要把回调函数包装进去
      let data = {
        cur_day:Number(this.time),
        cb:this.paint
      }
      this.PublicNumDaily(data)
    },
async PublicNumDaily ({commit},data) {
    let {cur_day,cb} = data
    let result = await ReqPublicNumDaily(cur_day)
    console.log('发送请求获取数据')
    if(result.code === 0){
      console.log('分发action 这是callback',data)
      commit(RECEIVEDATAColletion,result.data)
      cb && cb()
    }
  }