关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions
函数 关于 用法 作用 ----- 辅助
2023-09-27 14:26:17 时间
介绍mapActions辅助函数:
Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的;
Action是支持异步操作的,而Mutations只能是同步操作。
简单的:
const mutations = { add(state,val){ state.count++ }, reduce(state, val){ state.count -- } } const actions = { //这里的actionAdd是组件中和所触发的事件相对应的方法 actionAdd(context){ context.commit('add')//这里的add是mutations中的方法 }, //这里是通过参数结构来简化代码。 actionReduce( { commit } ){ commit('reduce') }
Actions接受一个context对象参数,该参数具有和store实例相同的属性和方法,所以我们可以通过context.commit()提交mutations中的方法,
或者可以通过context.state和context.getters去获取state和getters。
context作为上下文对象,有共享store实例的属性和方法的权利,但是切记:context并不是store实例本身。
{ commit } 这里直接把commit为属性的对象传过来,简化代码。
Action 通过 store.dispatch 方法触发 add() { this.$store.dispatch('actionAdd') }, reduce() { this.$store.dispatch('actionReduce') } Actions支持同样的载荷方式和对象进行分发: add() { this.$store.dispatch('actionAdd', { id: 1 }) }, reduce() { this.$store.dispatch({ type: 'actionReduce', id: 2 }) }
actions里对应的方法中第二个参数接受分发是传递的值
<button @click = 'countAdd'>+</button> <button @click = 'countReduce'>-</button> -------------------------------------------------------- import { mapState, mapMutations, mapActions } from 'vuex' methods: { //如果名字不同,使用mapActions辅助函数的对象参数 //...mapActions( { add: 'countAdd', reduce: 'countReduce'} ) //当action中的函数名和组件节点的方法名相同的时候,使用mapActions辅助函数的数组参数 ...mapActions( ['countAdd', 'countReduce'] ) }
相关文章
- 关于程序中delay函数带来的繁琐问题
- Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer 关于Newtonsoft.Json,LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整(去除空格和小写字符)
- 关于虚析构函数的作用和使用
- 箭头函数返回对象字面量
- 关于Oracle to_char()函数中的IW,WW 取星期 周别显示
- 第六十八章 Caché 函数大全 $WASCII 函数
- 关于Linux nanosleep函数时间精度的测试
- 腾讯测试高人分享4个关于 Python 函数(方法)的冷知识
- 关于Java中map函数的使用
- 【Java】整理关于java的String类,equals函数和比较操作符的区别
- Shell:数组和函数用法
- 【Matlab 六自由度机器人】关于双变量函数atan2(x,y)的解释
- 关于DLL模块导出函数
- ES6里关于函数的拓展(三)
- ES6里关于函数的拓展(二)
- 浅析关于sql中like操作符的使用及效率问题及如何使用locate或position或instr函数进行优化
- 写一个函数,用来清除字符串前后的空格
- cef3 获得js 返回值, 以及js 指挥delphi 函数的 总结参考
- [转载]《Delphi 版 everything、光速搜索代码》 关于获取文件全路径 GetFullFileName 函数的优化
- js生成一个不重复的ID的函数的进化之路
- Python入门学习笔记第八章——函数~~~