组件中dispatch某个action方法后，后边的操作同步进行但后边的操作用到了action的变量，但是这个变量当时没有值，

Question

我在action中通过ajax获取接口数据，然后commit到mutation去改变state是我ajax获取的某个数据；然后在aa.vue组件中mounted周期函数中dispatch这个action；同时dispatch这个action的后面有一些操作；用到laction中获得的数据（比方叫detailDate）我也在computed中对这个detailDate进行了注册（mapstate）；但是我dispatch这个action后边的操作用到 detailDate的时候不是我通过action中接口获得的值；而是一开始在定义state中的空字符串；我感觉是请求接口有延时而且是异步请求；我dispatch这个action后边的操作和请求同时进行；即便我用到那个detailDate也是没有重新通过mutation更新后的值；

我应该怎样做；才能保证我dispatch这个action后边的操作用到的detailDate的值是mutation中更新后的值呢？ 我是在dispatch的时候传一个回调函数？？还是用watch去监听detailDate这个变量变化的时候再去做我的操作呢？虽然这两种方式我都试过；但是我觉得都不是很好（是不是真的不好我就不知道了，只是个人觉得，因为我感觉既然设计了vuex出来，这样简单的问题不应该没有特定的解决办法，可能我不知道），所以请问下，哪中操作去解决这个问题比较好呢？

Answer 1

你的action操作应该return出来一个Promise，然后当接口请求完成后resolve()，组件里的.then()再执行操作。

actions 代码：

const getUserAuth = ({commit}) => {
  return new Promise(async (resolve, reject)=>{
    const res = await http.post('adminMenu', {});
    if (res === null) return;
    commit('SET_USER_AUTH', res.param.auth);
    commit('SET_SIDE_NAV', res.param.nav);
    resolve() // 接口请求完成
  })
};

组件内代码：

this.$store.dispatch('getUserAuth').then(()=>{
  // 接口请求完成后
})

其实也应当配合加载动画来使用的。