Vuex Action的 { commit }的写法教程
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"
到此这篇关于Vuex Action的 { commit }的写法的文章就介绍到这了,更多相关Vuex Action的 { commit }内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
基于Ant-design-vue的Modal弹窗 封装 命令式与Hooks用法
这篇文章主要给大家介绍了基于Ant-design-vue的Modal弹窗封装命令式与Hooks用法,文中有详细的代码示例,具有一定的参考价值,感兴趣的同学可以借鉴阅读2023-06-06快速解决Error: error:0308010C:digital envelope ro
因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,下面通过本文给大家分享快速解决Error: error:0308010C:digital envelope routines::unsupported的三种解决方案,感兴趣的朋友一起看看吧2024-02-02vue3如何使用postcss-px-to-viewport适配屏幕
这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03require.js 加载 vue组件 r.js 合并压缩的实例
这篇文章主要介绍了require.js 加载 vue组件 r.js 合并压缩的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-10-10
最新评论