Vuex之Mutation
【前言】
数据在页面是获取到了,但是如果需要修改count值怎么办?更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
【主体】
(1)触发事件,提交变异
如果需要修改store中的值唯一的方法就是提交mutation来修改,现在在单文件组件.vue文件中添加两个按钮,一个加1,一个减1;这里点击按钮调用addFn(执行加的方法)和cutFn(执行减法的方法),然后在里面直接提交mutations中的方法修改值
要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法
this.$store.commit()
(2)注册变异事件
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法,如下
(3)提交载荷(Payload)
可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)
①注册时添加第二个参数载荷payload
②提交时添加第二个参数
③在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读
注册时,提交时
(4)Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的,那么当变更状态时,监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项:最好提前在你的 store 中初始化好所有所需属性。需要在对象上添加新属性时,你应该使用
Vue.set(obj, 'newProp', )
(5)Mutation 必须是同步函数
devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的
(6)同步与异步
在 mutation 中混合异步调用会导致你的程序很难调试。
例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?
这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务:
store.commit(event-name)
/* 任何由 "event-name" 导致的状态变更都应该在此刻完成 */
为了处理异步操作,vuex出了Action,下一篇介绍
.
Vuex之Mutation的更多相关文章
- Vuex基础-Mutation
借助官网的一张图,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.不可以直接对其进行赋值改变.需要注意的是,mutations只能做一些同步的操作. 代码结构: ...
- [Vuex系列] - Mutation的具体用法
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 ...
- vuex中mutation和action的详细区别
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...
- 【vuex】mutation和action的区别
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...
- vuex之Mutation(三)
说明 既然我们可以取出数据,就可以修改数据,而修改数据并不是像修改data的数据一样,直接 this.xxx = xxx,这样有一个问题,在实际开发中,state的数据一般会多个组件共享,如果可以使用 ...
- vuex——action,mutation,getters的调用
一.子模块调用根模块的方法 mutation调用 context.commit('clearloginInfo',{key_root:data},{root:true}); action调用 co ...
- 06-vue项目02:vuex、Mutation、Action、ElementUI、axios
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...
- vuex 源码解析(四) mutation 详解
mutation是更改Vuex的store中的状态的唯一方法,mutation类似于事件注册,每个mutation都可以带两个参数,如下: state ;当前命名空间对应的state payload ...
- Vuex源码解析
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
随机推荐
- 你的ThreadLocal线程安全么
想必很多小伙伴们对ThreadLocal并不陌生,ThreadLocal叫做线程本地变量,也就是ThreadLocal为变量在每个线程中都创建了一个副本,每个线程可以访问自己内部的副本变量.那么,我们 ...
- .net core 运行不需命令行
1.问题情景: 需要保证已安装.net core SDK,并且命令提示符下运行“dotnet --version”,有反应. 如果之前运行良好,现在却不行了,查看安装程序中存在.net core SD ...
- 【RabbitMQ学习之二】RabbitMQ四种交换机模式应用
环境 win7 rabbitmq-server-3.7.17 Erlang 22.1 一.概念1.队列队列用于临时存储消息和转发消息.队列类型有两种,即时队列和延时队列. 即时队列:队列中的消息会被立 ...
- 【IntelliJ IDEA学习之二】IntelliJ IDEA常用配置
版本:IntelliJIDEA2018.1.4 一.常用配置两张概览图(1)工作区总览介绍图 (2)setting配置图 --------------------------------------- ...
- 5 系统的软中断CPU升高,一般处理办法?
还是需要多动手,一个一个问题个被get!
- SQL告警
SQL很有必要 MySQL性能 最大数据量 最大并发数 查询耗时0.5秒 实施原则 数据表设计 数据类型 避免空值 text类型 索引优化 索引分类 优化原则 SQL优化 分批处理 不做列运算 避 ...
- Win 10 没有 Hyper-V 解决方案
1.首先新建一个记事本文件. 2.在记事本中写入. pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.m ...
- AntDesign vue学习笔记(六)Table 显示图片
AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...
- Docker 搭建简单 LVS
LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现了基 ...
- LOJ2336 JOI2017 绳 贪心、构造
传送门 首先显然的是可以一开始先染好再做.每个点只会被染一次.最后只剩下两种颜色. 接下来是结论时间:序列可以反转的充要条件是除了首尾的极大颜色连通块以外其他极大颜色连通块长度为偶数. 证明充分性:考 ...