前端技术之：如何在vuex状态管理action异步调用结束后执行UI中的方法
- 2019 年 11 月 8 日
- 筆記
一、问题的起源
最近在做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 处理异常情况 }); }, // ... }
