乐趣区

前端技术之如何在vuex状态管理action异步调用结束后执行UI中的方法

jiezi

一、问题的起源

最近在做 vue.js 项目时，遇到了 vuex 状态管理 action 与 vue.js 方法互相通信、互操作的问题。场景如下图所示：

二、第一种解决方法

例如，我们在页面初始化的时候，需要从服务端通过 API 接口获取数据，数据获取成功前需要显示 Loading 状态框，数据获取完成后，需要将 Loading 状态框隐藏。

这是一种相对比较简单的应用场景，解决起来当然也比较简单。

我们可以 通过 state 数据字段来实现，在 state 中存储一个 loading 字段，并设置默认值为 false。

const store = new Vuex.Store({
  state: {loading: false},
  // ......
});

因为要对 state.loading 进行操作，所以，我们需要定义一个 mutation 方法，用于更新 loading 状态数据。

const UPDATE_LOADING = 'updateLoading';

const store = new Vuex.Store({
  // ......,
  mutations: {updateLoading (state, loading) {state.loading = loading;}
  },
  // ......
});

然后，我们声明一个 action 方法，用于从 HTTP API 获取数据。

const store = new Vuex.Store({
  // ......,
  actions: {fetchData ({ commit}) {commit(UPDATE_LOADING, true);
      axios.get('...', { params: {...} })
        .then(res => {// TODO 解析 HTTP 响应数据，进行相关的业务逻辑处理})
        .catch(err => {// TODO 进行相关的错误与异常处理})
        .finally(() => {commit(UPDATE_LOADING, false);
        });
    }
  },
  // ......
})

在页面模板中，我们通过 mapActions 函数将 vuex 的 action 方法映射为 vue.js 中对象的方法。

import {mapActions} from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'fetchData',
      // ...
    ])
  }
}

最后，在 vue.js 的 mounted 生命周期方法中调用通过 mapActions 映身的方法 fetchData 即可。

export default {
  // ...,
  mounted() {this.fetchData();
  },
  // ...
}

三、第二种解决方法

上述的第一种解决方法，可以通过 mutation 修改 state 的状态数据控制 UI 上的数据渲染。但如果想要将获取到的结果数据传到 UI 组件是不行的，另外，如果想要在调用 action 方法执行完成后在 UI 中再去做一些事情也是行不通的。

以前我们知道，异步方法传递数据，可以通过回调函数的参数进行传递数据，所以，我提到的第二种解决办法就是 通过回调函数实现 的。

const store = new Vuex.Store({
  // ......,
  actions: {fetchData ({ commit}, {params, callback}) {commit(UPDATE_LOADING, true);
      axios.get('...', { params})
        .then(res => {callback(res);
        })
        .catch(err => {// TODO 进行相关的错误与异常处理})
        .finally(() => {commit(UPDATE_LOADING, false);
        });
    }
  },
  // ......
})

四、第三种解决方法

以上两种方式虽然可以解决某些问题，但解决方法不够优雅，而且第一种方法具有很大的局限性。比如，不能回调主界面中的方法执行后续的操作，也不能自由地传递参数。第二种方法采用回调可以调用方法，也可以传参，但 callback 的调用是同步方式，代码风格也不是很好。所以，我比较提倡大家使用第三种方法，就是在 action 调用时返回一个 Promise，这样在主界面就可以拿到这个 promise 对象，并进行链式执行后续的任务，也可以将 action 异步任务的结果数据传递给主 UI。

const store = new Vuex.Store({
  // ......,
  actions: {fetchData ({ commit}, {params}) {commit(UPDATE_LOADING, true);
      return axios.get('...', { params})
        .then(res => {const { data} = res;
          return data;
        })
        .finally(() => {commit(UPDATE_LOADING, false);
        });
    }
  },
  // ......
})

在主 UI 中，我们就可以采用如下的方式进行后续的操作。

export default {
  // ...,
  mounted() {this.fetchData({ id: 1})
      .then(res => {// TODO 执行后续的任务})
      .catch(err => {// TODO 处理异常情况});
  },
  // ...
}
退出移动版