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 实现复制内容到剪贴板功能，本文通过两种方法，给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
下面小编就为大家分享一篇使用vue toggle实现点击切换class的示例。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法
密码或者其他比较重要东西假如使用明文传输中是很危险的,所以就需要前端一些加密协议,对密码、手机号、身份证号等信息进行保护,下面这篇文章主要给大家介绍了关于vue项目中使用md5加密、crypto-js加密、国密sm3及国密sm4的相关资料,需要的朋友可以参考下2022-12-12
vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧2023-04-04
下面小编就为大家分享一篇vue中简单弹框dialog的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能
这篇文章主要介绍了vue3.0+element Plus实现页面布局，侧边栏菜单路由跳转,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue中的ref,props,mixin属性,文章围绕主题ref,props,mixin展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
详解Vue后台管理系统开发日常总结(组件PageHeader)
这篇文章主要介绍了详解Vue后台管理系统开发日常总结(组件PageHeader)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在 Vue3 中如何使用 styled-components
styled-components 的官方 Vue 版本目前已多年没有更新,而且只支持到 Vue2,那么,在 Vue3 中怎么才能使用到 styled-components 呢,下面给大家介绍在 Vue3 中使用 styled-components的相关知识,感兴趣的朋友跟随小编一起看看吧2024-05-05
这篇文章主要为大家详细介绍了VUE实现注册与登录效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论