vue使用vuex数据更新问题？

Question

页面分了三个模块
创建是一个对话框 点击对话框确认的时候

下面这个是封装的vuex

分别在这个三个组件里面通过dispatch调用getInfo方法
刚进入页面的时候调用dispatch获取到数据和查询获取数据没有没有问题
创建点击对话框的时候请求成功以后通过dispatch调用getInfo方法，获取新的数据
也就是表格里面新增一条任务

点击确认关闭对话框以后通过dispatch调用getInfo方法后端请求的的状态是这样的
必须等新增的这个任务完成以后，页面才添加元素

是我请求的方法不对 还是调用的地方不对

Answer 1

大概率是异步调用的问题，你试试把vuex 的actions中的getInfo和创建任务的方法包装成一个Promise 返回，然后外部调用的时候使用async/await语法糖。如下：

// vuex
actions: {
    async getInfo(context, obj) {
        return new Promise((resolve, reject) => {
            axios({...}).then(res => {
                context.commit('getManagesData', res)
                context.commit('getTotalNum', res)
                resolve()
            })
        })
    }
}

// createTask
async createTask() {
    return new Promise((resolve, reject) => {
        axios({...}).then(res => {
            .... // 创建后处理逻辑
            resolve（）
        })
    })
}

// 点击确认创建任务按钮方法
async confirm () {
    await createTask()
    await getInfo()
    this.visible = false // 关闭弹层
}

这样写更具有同步化代码的阅读体验

Answer 2

出现的原因：

异步问题，因为调用接口是异步请求，而你关闭弹窗时 时同步代码，应该将关闭弹窗放在请求完成之后 在进行关闭弹窗，这时候就不会出现你的那个问题了。

解决办法：1.用asyc await

     2.或者用watch 监听state的managesData的长度是否发生了变化  然后关闭弹窗
     3.将所有请求都放在点击弹窗的时候调用，调用完后，将数据获取回来后再将数据 存放到vuex中

已参与 「极客观点」 ，欢迎正在阅读的你也加入。