Vuex Action的 { commit }的写法教程
更新时间：2023年10月11日 09:04:50 作者：emanlee
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候，{commit} 写法是解构后得到的，这篇文章主要介绍了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 }内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue+elementUI实现点击左右箭头切换按钮功能,样式可以根据自己需求改动,感兴趣的朋友可以参考下实现代码2024-05-05
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
uni-app如何设置页面全局背景色,其实非常简单,一句话即可,但有时候也会踩一些坑,这篇文章主要给大家介绍了关于uniapp中设置全局页面背景色的相关资料,需要的朋友可以参考下2023-03-03
懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验,这篇文章主要给大家介绍了关于vue项目实现图片懒加载的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue中关于router.beforeEach()的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vant如何自定义组件适配iphone底部安全区问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue接入ts基本方法，关于ts，也出了很久，下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法，也算是一个初级尝试，简单梳理下基础的接入配置和已经遇到的问题，供需要的小伙伴们参考2022-01-01
在 Vue 3 的开发过程中,计算属性是一个强大而优雅的工具,它不仅能简化模板逻辑,还能显著提升代码的可读性、可维护性和运行效率,本文将结合两个典型开发场景,深入剖析计算属性的正确使用方式及其带来的诸多优势,需要的朋友可以参考下2026-02-02
Vue中"This dependency was not found"问题的解决方法
这篇文章主要介绍了Vue中"This dependency was not found"的问题的解决方法,需要的朋友可以参考下2018-06-06
最新评论