您好,登录后才能下订单哦!
最近在做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 处理异常情况
});
},
// ...
}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。