H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

我在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出来,这样简单的问题不应该没有特定的解决办法,可能我不知道),所以请问下,哪中操作去解决这个问题比较好呢?

回答:

你的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(()=>{
  // 接口请求完成后
})

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

本文地址:H5W3 » 组件中dispatch某个action方法后,后边的操作同步进行但后边的操作用到了action的变量,但是这个变量当时没有值,

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址