1.什么是mutations?
上一篇文章说的getters
是为了初步获取和简单处理state
里面的数据(这里的简单处理不能改变state里面的数据),Vue
的视图是由数据驱动的,也就是说state
里面的数据是动态变化的,那么怎么改变呢,切记在Vuex
中store
数据改变的唯一方法就是mutation
!
通俗的理解mutations
,里面装着一些改变数据方法的集合,这是Veux
设计很重要的一点,就是把处理数据逻辑方法全部放在mutations
里面,使得数据和视图分离。
2.怎么用mutations?
mutation结构:每一个mutation
都有一个字符串类型的事件类型(type
)和回调函数(handler
),也可以理解为{type:handler()},
这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker()
,调用type
的时候需要用到store.commit
方法。
store.commit('increment') //调用type,触发handler(state)
载荷(payload):简单的理解就是往handler(stage)
中传参handler(stage,pryload)
;一般是个对象。
const store = new Vuex.Store({
state: { ... },mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
commit:提交可以在组件中使用 this.$store.commit('xxx')
提交 mutation
,或者使用 mapMutations
辅助函数将组件中的 methods
映射为 store.commit
调用(需要在根节点注入 store
)。
export default {
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为
this.$store.commit('increment')]),...mapMutations({
add: 'increment' // 映射 this.add() 为
this.$store.commit('increment')
})}}
3.源码分析
registerMutation
:初始化mutation
commit
:调用mutation
subscribers
:订阅store
的mutation
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/39867.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。