action mutation 调用_浅谈vuex之mutation和action的基本使用
我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1
一、mutation
在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在test.js添加mutation.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
increment(state) {
state.count++;
},
// 减1
decrement(state) {
state.count--
}
}
})
Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
}
二、action
action去commit mutations, 所以还要定义action. test.js 里面添加actions.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit("INCREMENT");
},
decrement(context) {
context.commit("DECREMENT");
}
}
})
action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。
其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
actions: {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
}
}
三、dispatch action
现在就剩下dispatch action 了。什么时候dispatch action 呢? 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
这个时候我们需要新建一个操作组件,我们暂且命名为test.vue
+1
-1
然后,我们在methods里面获取这两个操作事件
export default {
methods: {
increment(){
this.$store.dispatch("increment");
},
decrement() {
this.$store.dispatch("decrement")
}
}
}
当然上面这种写法比较麻烦,vuex还给我我们提供了mapActions这个函数,它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
import {mapActions} from 'vuex'
export default {
methods: {
...mapActions(['increment', 'decrement'])
}
}
如果事件处理函数名字和action的名字不同,给mapActions
提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
import {mapActions} from 'vuex'
export default {
methods: {
// 这中写法虽然可行,但是比较麻烦
// 这时vue 提供了mapAction 函数,
// 它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
// increment () {
// this.$store.dispatch('increment')
// },
// decrement () {
// this.$store.dispatch('decrement')
// }
// 下面我们使用一种比较简洁的写法
// ...mapActions(['increment', 'decrement'])
/**
如果事件处理函数名字和action的名字不同,给mapActions
提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
*/
// 这里实际是为了改变事件的名字
...mapActions(['decrement']),
...mapActions({
add: 'increment'
})
}
}
这时候我们单击按钮,就可以看到count 发生变化。
最后附一张简单的图形解析,看起来应该能更直观一点
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
action mutation 调用_浅谈vuex之mutation和action的基本使用相关推荐
- java rpc远程调用_浅谈rpc(远程过程调用)
信息来源:邪恶八进制信息安全团队 RPC协议2:这个协议是一个够年头的协议 本文介绍用于ONC RPC协议规范.此协议使用XDR语言进行描述,并文不打算描述具体的使用细节而只介绍RPC协议本身. ON ...
- 《计算机辅助教学及应用实践研究》,《论文_浅谈计算机辅助教学(定稿)》
<论文_浅谈计算机辅助教学(定稿)> (3页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 摘要:计算机辅助教学中要用到多媒体课件 ...
- python判断两个对象是否为相等使用的运算符是_Python入门_浅谈逻辑判断与运算符...
这是关于Python的第6篇文章,主要介绍下逻辑判断与运算符. (一) 逻辑判断: 如果要实现一个复杂的功能程序,逻辑判断必不可少.逻辑判断的最基本标准:布尔类型. 布尔类型只有两个值:True和Fa ...
- action mutation 调用_【Vuex】dispatch和commit来调用mutations的区别
Action Acti和第,.年过事工宗据指数遍互业经搞断果会on 类似于 mutation,抖要支圈者器说是事天开的.年后编定功口小发还应久剑不同在于: Action 提交的是 mutation,而 ...
- java dao service实例_浅谈Action+Service +Dao 功能
1. Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. D ...
- python中怎么调用函数_浅谈Python中函数的定义及其调用方法
一.函数的定义及其应用 所谓函数,就是把具有独立功能的代码块组织成为一个小模块,在需要的时候调用函数的使用包含两个步骤 1.定义函数–封装独立的功能 2.调用函数–享受封装的成果 函数的作用:在开发时 ...
- python打开方式错误_浅谈python 调用open()打开文件时路径出错的原因
昨晚搞鼓了一下python的open()打开文件 代码如下 def main(): infile =open("C:\Users\Spirit\Desktop\bc.txt",'r ...
- python open找不到文件的原因_浅谈python 调用open()打开文件时路径出错的原因
昨晚搞鼓了一下python的open()打开文件 代码如下 def main(): infile =open("C:\Users\Spirit\Desktop\bc.txt",'r ...
- swift 引用其他类_浅谈swift中闭包修饰符 weak?unowned? 或什么都不用
浅谈swift中闭包修饰符 weak?unowned? 或什么都不用 平常的开发中,clourse是我们iOSr绕不过去的坎儿. 苹果本身也很重视闭包,像之前的一些老的target-action类型的 ...
最新文章
- CCF认证历年试题解【网上跟帖,请不要使用称呼】
- 图解MongoDB的连接与使用,通俗易懂
- Hive的两种操作模式
- mina 粘包、多包和少包的解决方法
- HDU 5015 233 Matrix 矩阵快速幂
- vba模拟鼠标点击_网页自动输入录入用阿冲全能点击王轻松完成
- 如何用java语言编写小游戏?(一)
- Java教师评估系统_jsp教师在线评价系统
- android+otg+apk,android手机 OTG功能调试usb串口的demo程序
- 设计一个正方形类,其中包括边长一个属性,包括构造函数,析构函数,求面积的成员函数和求周长的成员函数,通过正方形类定义2个正方形对象,并求建设一个下图所示的活动场地的费用。(用户输入中间草坪场地的边长)
- android画板案例
- JVM 直接内存的使用与回收
- sqlzoo-day7
- 简历 计算机二级技能描述,【技能证书】简历中职业技能的经典描述
- matlab模拟三体运动_如何写出三体的MATLAB程序-理论分析篇
- Android 中获取指纹(SAH1)签名
- 无聊的活动/缘生意转(2018 Nova OJ新年欢乐赛B题)解题报告
- 给成绩单中的学生发送电子邮件
- 暗黑搞笑之东邪西毒格言篇
- 一秒批量导出PPT中的所有图片
热门文章
- IG夺冠5亿变63亿,电竞游戏引全民热潮,区块链游戏的未来在哪里? | 独角兽行研报告
- SNS交友网站会成为下一个分众吗
- 多声道、高压、澎湃的影院音效——AC3
- windows nao naoqi SDK 配置
- 在你的DLL中,如何导入(导出)一个类,使得其他项目可以调用该类?
- tiny4412安装Linux系统,FriendlyARM Tiny 4412开发板烧写Linux系统步骤
- 各种模拟仿真系统收集汇总(不断更新.....)
- js砸金蛋抽奖js特效
- 智慧城市我国发展现状怎样?
- 年轻的Vivaldi浏览器正在从社区中汲取灵感