介绍,const store =, new Vuex.Store ({
,,,状态:,{
,,,,,,,数:1
,,,,,,,},
,,,突变:,{
,,,increment (状态),{,,,,,//注册事件,类型:增量、处理程序第一个参数是状态;
,,//,才能变更状态
,,state.count + +}}}
,,store.commit(& # 39;增量# 39;),,,//调用类型,触发处理程序(国家) ,,突变:,{
,increment (状态,,n), {
,,,,state.count +=, n}}
,store.commit(& # 39;增量# 39;,,10) export const SOME_MUTATION =, & # 39; SOME_MUTATION& # 39; import {, mapMutations },得到& # 39;vuex& # 39;
export default {
方法:,{
……mapMutations(才能
,,,& # 39;增量# 39;,//,映射,this.increment(),为,这个。美元store.commit(& # 39;增量# 39;)]),
…mapMutations({才能
,,,添加:,& # 39;增量# 39;,//,映射,this.add(),为这。美元store.commit(& # 39;增量# 39;)
})才能}} function registerMutation (商店、,类型,处理程序,,path =, []), {
,//4个参数,存储是存储实例,类型为突变的类型、处理程序、路径为当前模块路径
,,,const entry =, store._mutations[型],| |,(store._mutations[型],=,
[]),,//通过类型拿到对应的突变对象数组
,,,,entry.push (function wrappedMutationHandler (载荷),{
,,,,//将突变包装成函数推到数组中,同时添加载荷载荷参数,,,,
,,,,处理程序(getNestedState (store.state,路径),有效负载)
,,,,//通过getNestedState()得到当前的状态,同时添加载荷载荷参数
,,})
以前,} commit (类型,负载,选项),{//才能,3个参数,类型是类突变型,有效载荷载荷,选择配置
,,,if (isObject(类型),,,,type.type), {
,,,,,,//,当类型为对象类型,
,,,,,options =有效载荷
,,,,,payload =,类型
,,,,,type =type.type
,,}
,const mutation =,{,类型,payload }
,const entry =, this._mutations(类型)//,,,通过类型查找对应的突变
,if (条目),{//才能找不到报的错
,,console.error (“[vuex], unknown mutation 类型:,${类型}')
,才能回来
,}
,this._withCommit((),=祝辞,{
,,entry.forEach (function commitIterator (处理器),{
,,//,遍历类型对应的突变对象数组,执行处理(载荷)方法
,,//也就是开始执行wrappedMutationHandler(处理器)
,,,,处理程序(载荷)
,,})
,})
,if (! options | |, ! options.silent), {
,,this._subscribers.forEach (sub =祝辞,子(突变,,this.state))
,,,//把突变和根状态作为参数传入
,}
} subscribe (fn), {
const subs =this._subscribers
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关Vuex中突变的使用方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
通俗的理解突变,里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据逻辑方法全部放里在突变面,使得数据和视图分离。
怎么用突变?
突变结构:每一个突变都有一个字符串类型的事件类型(类型)和回调函数(处理器),也可以理解为{类型:处理程序()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用类型的时候需要用到store.commit方法。
载荷(负载):简单的理解就是往处理程序(阶段)中传参处理程序(阶段,有效载荷);一般是个对象。
mutation-types:将常量放在单独的文件中,方便协作开发。
mutation-types.js
商店。js
import Vuex 得到& # 39;vuex& # 39;
{},SOME_MUTATION import 得到& # 39;。/mutation-types& # 39;
const 才能;store =, new Vuex.Store ({
,,,状态:,{,,,},
,,,突变:,{
,,,,//,我们可以使用,ES2015 风格的计算属性命名功能来使用一个常量作为函数名
,,,(SOME_MUTATION),(状态),{
,,,//,mutate 状态
,,}
}
}) 提交:提交可以在组件中使用<代码>。美元store.commit (& # 39; xxx # 39;) 提交突变,或者使用mapMutations辅助函数将组件中的方法映射为store.commit调用(需要在根节点注入商店)。
源码分析
提交:调用变异
用户:订阅商店的变异
