https://segmentfault.com/a/1190000022018995
https://www.jianshu.com/p/8c3599dda094
vuex教程中,有这样一句话和这样一段代码:
实践中,我们会经常用到 ES2015 的参数解构来简化代码(特别是我们需要调用commit
很多次的时候):
actions: {
increment ({ commit }) {
commit('increment')
}
}
其中,{commit} 写法是解构后得到的,下面就简短解释一下简化的过程:
知识点:
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
因此这个context参数可以理解为store
即这个context参数可以使用commit提交mutation
所以,context也同样包含以下属性
{
state, // 等同于 `store.state`,若在模块中则为局部状态
rootState, // 等同于 `store.state`,只存在于模块中
commit, // 等同于 `store.commit`
dispatch, // 等同于 `store.dispatch`
getters, // 等同于 `store.getters`
rootGetters // 等同于 `store.getters`,只存在于模块中
}
原写法:
actions: {
increment (context) {
context.commit('increment')
}
}
相当于:
actions:{
increment ({ commit: context.commit }) {
context.commit('increment');
}
}
相当于:
actions: {
increment ({ commit }) {
commit('increment')
}
}
借鉴ES2015中对象的解构
var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);// "lorem"
console.log(bar);// "ipsum"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。