[Vuex系列] - Mutation的具体用法
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
接下来我们还是用上一篇文章在state中存放的count为例,来看利用Mutation修改state的count属性。
利用commit来触发mutation函数
在mutation函数中添加count的add函数
const mutations = {addNum (state) {state.num++},add (state) {state.count += 2}
}
export default mutations
在组件中使用mutation进行实现叠加器
<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div>
</template><script>
import store from '@/store/store'
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add')}}
}
</script>
Mutation的载荷(payload)
你可以向store.commit传入额外的参数,即mutation的载荷(payload):我们还是以上面累加器的例子来实现mutation函数的传参,来动态定义累加的数量。
在mutation.js中修改add方法
const mutations = {addNum (state) {state.num++},add (state, n) {state.count += n}
}export default mutations
在组件中store.commit如何传参
<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div>
</template><script>
import store from '@/store/store'
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add', 5)}}
}
</script>
在mutation传参(载荷)可以传递一个参数也可以传递一个对象。让我们修改下上面的例子
mutation.js文件中修改如下
const mutations = {addNum (state) {state.num++},add (state, payload) {state.count += payload.amount}
}export default mutations
组件中修改如下
<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div>
</template><script>
import store from '@/store/store'
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add', { amount: 10 })}}
}
</script>
在store.commit中可以进行对象风格的提交
依据上面的例子,我们将组件中内容修改如下
<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div>
</template><script>
import store from '@/store/store'
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit({type: 'add',amount: 8})}}
}
</script>
使用常量替代 Mutation 事件类型
使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使 linter之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个项目包含的mutation一目了然。这在在需要多人协作的大型项目中,这会很有帮助。
我们在store中新建mutation-types.js文件,文件内容如下
export const SOME_MUTATION = 'SOME_MUTATION'
在mutation.js文件内容如下
import { ADD } from './mutation-types'
const mutations = {addNum (state) {state.num++},[ADD] (state) {state.count++}
}export default mutations
在组件中内容和之前一致
<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div>
</template><script>
import store from '@/store/store'
export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add')}}
}
</script>
在组件中使用this.$store全局属性来触发mutation函数
<template><div class="mutation"><p>{{ count }}</p><button @click="add">+ADD</button></div>
</template><script>
export default {computed: {count () {return this.$store.state.count}},methods: {add () {this.$store.commit('add')}}
}
</script>
在组件中使用mapMutations辅助函数
<template><div class="mutation"><p>{{ count }}</p><button @click="add">+ADD</button></div>
</template><script>
import { mapMutations } from 'vuex'
export default {computed: {count () {return this.$store.state.count}},methods: {...mapMutations(['add'])}
}
</script>
Mutation一条重要的原则就是要记住 mutation 必须是同步函数
转载于:https://www.cnblogs.com/wangshucheng/p/vux-003.html
[Vuex系列] - Mutation的具体用法相关推荐
- vuex中mutation和action的详细区别
一.vuex中mutation和action的详细区别 const store = new Vuex.Store({state: {count: 0},mutations: {increment (s ...
- VUEX模块化不同模块调用其它模块的mutations报错: [vuex] unknown mutation type: XXX
cart.js mutations:{delGoods(){ console('删除商品') }} order.js mutations:{createdorder(){ commit('delGoo ...
- vuex系列--浅析Vuex 的设计思想
一.前言 在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要.什么是共享状态?比如一个组件需要使用 ...
- [vuex] unknown mutation type: set_userinfo
[vuex] unknown mutation type: set_userinfo #问题 解决办法 一般是vuex状态管理的 mutations: { set_userinfo(state, us ...
- “约见”面试官系列之常见面试题之第七十七篇之vuex中mutation和action的详细区别 (建议收藏)
const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actio ...
- vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法
state 存放的是一个对象,存放了全部的应用层级的状态,主要是存放我们日常使用的组件之间传递的变量. 我们今天重点讲解下state的几种用法,至于如何从头开始创建Vuex项目,请看我写的第一个文章. ...
- [Vuex系列] - Module的用法(终篇)
于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿.为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每 ...
- [Vuex系列] - Vuex中的getter的用法
Vuex 允许我们在store中定义"getter"(可以认为是store的计算属性).就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变 ...
- Go基础系列:双层channel用法示例
Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 双层通道的解释见Go的双层通道 ...
最新文章
- 利用perf排查sys高的问题
- 强网杯2021 [强网先锋]orw
- 如何定制化SAP Spartacus的页面布局
- SAP Cloud Application Studio避免出现性能问题的一些最佳实践
- 下面不是mysql特性_下面( )不是MySQL的特性。_学小易找答案
- K8s 学习者绝对不能错过的最全知识图谱(内含 56个知识点链接)
- 【Java】猜数字小游戏
- 【java奇思妙想】使用多线程的思想来实现java网络编程接收和发送的问题
- Java学习笔记——JDBC之与数据库MySQL的连接以及增删改查等操作
- bootstrap引入文件方法
- html设置列表编号起始值,Word多级编号怎么设置,要按我的要求作为起始值?
- Python之——网站访问流量统计
- 全基因组关联分析学习资料(GWAS tutorial)20210313更新版
- 保你学会Springboot如何前后端分离地传输数据!(后端,前端的坑过几天填上)
- mfc改计算机名称,VC获取并修改计算机屏幕分辨率(MFC)
- 2017.11.21 软件工程概论第一节课
- inurl:php?title=,查看“岗梅”的源代码
- numpy序列预处理dna序列_合成生物学快讯2019年第12期:基于DNA的分子数字数据存储...
- 2017 Material design 第三章第一节《颜色》
- SL651-2014 《水文监测数据通信规约》 人工置数详解
热门文章
- ARM寄存器及功能介绍/R0-R15寄存器
- 每日一题(53)—— 评价代码片段
- ftp linux包,图文详解Ubuntu搭建Ftp服务器的方法(包成功)
- 【Pytorch神经网络实战案例】20 基于Cora数据集实现图卷积神经网络论文分类
- python批量处理excel文本改为数字_Python批量修改Excel中的文件内容
- excel记账本模板_原来这才是老板最喜欢看的财务报表!这些模板送你,录入自动生成...
- 升级 ubuntu_Ubuntu 19.04 已经到期!现有用户必须升级到 Ubuntu 19.10
- LeetCode 2058. 找出临界点之间的最小和最大距离(链表)
- LeetCode 1060. 有序数组中的缺失元素(二分查找)
- 程序员面试金典 - 面试题 17.07. 婴儿名字(并查集)