Vuex: an instance for understanding Mutations usage, and a vuexmutations instance

Vuex: an instance for understanding Mutations usage, and a vuexmutations instance

1. What is mutations?

In the previous articlegettersIt is for initial acquisition and simple processing.stateData in it (the simple processing here cannot change the data in the state ),VueThe view is data-driven, that isstateThe data changes dynamically.VuexMediumstoreThe only way to change data ismutation!

General understandingmutationsWhich contains a set of data change methods. This isVeuxAn important part of design is to put all the logic methods for data processing inmutationsTo separate the data from the view.

2. How to Use mutations?

Mutation structure: eachmutationAll have a string type event type (type) And callback functions (handler).{type:handler()},This is similar to subscription Publishing. Register the event first and call it when the response type is triggered.handker(), CalltypeIt is requiredstore.commitMethod.

Const store = new Vuex. store ({state: {count: 1}, mutations: {increment (state) {// registration time, type: increment, handler the first parameter is state; // change the state. count ++ }}) store. commit ('credentials') // call type to trigger handler (state)

Payloadhandler(stage)Passing Parametershandler(stage,pryload)It is generally an object.

Mutations: {increment (state, n) {state. count + = n} store. commit ('credentials', 10) mutation-types: Place constants in a separate file to facilitate collaborative development. // Mutation-types.js export const SOME_MUTATION = 'some _ mutation' // store. jsimport Vuex from 'vuex' import {SOME_MUTATION} from '. /mutation-types 'const store = new Vuex. store ({state :{...}, mutations: {// we can use the ES2015 style computing attribute naming function to use a constant as the function name [SOME_MUTATION] (state) {// mutate state }}})

Commit: Submit can be used in components this.$store.commit('xxx')Submitmutation, Or usemapMutations Auxiliary Functionsmethods Ingstore.commit Call (injection at the root node is requiredstore).

Import {mapMutations} from 'vuex' export default {methods :{... mapMutations (['credentials' // ing this. increment () is this. $ store. commit ('credentials')]),... mapMutations ({add: 'credentials' // ing this. add () is this. $ store. commit ('credentials ')})}}

3. Source Code Analysis

registerMutation: Initializationmutation

Function registerMutation (store, type, handler, path = []) {// four parameters: store instance, type is mutation type, handler, path is the current module path const entry = store. _ mutations [type] | (store. _ mutations [type] = []) // obtain the corresponding mutation object array entry through type. push (function wrappedMutationHandler (payload) {// wrap mutation into a function push to the array, and add the payload parameter handler (getNestedState (store. state, path), payload) // get the current state through getNestedState () and add the payload parameter })}

commit: Callmutation

Commit (type, payload, options) {// three parameters, type is mutation type, payload load Load, options configuration if (isObject (type) & type. type) {// when type is of the object type, options = payload = type. type} const mutation = {type, payload} const entry = this. _ mutations [type] // find the corresponding mutation if (! Entry) {// The error console is not found. error ('[vuex] unknown mutation type: $ {type}') return} this. _ withCommit () => {entry. forEach (function commitIterator (handler) {// traverse the mutation object array corresponding to the type and execute the handle (payload) method // that is, start executing wrappedMutationHandler (handler) handler (payload)}) if (! Options |! Options. silent) {this. _ subscribers. forEach (sub => sub (mutation, this. state) // pass mutation and root state as parameters }}

subscribers: SubscriptionstoreOfmutation

subscribe (fn) {const subs = this._subscribersif (subs.indexOf(fn) < 0) { subs.push(fn) }return () => { const i = subs.indexOf(fn) if (i > -1) {  subs.splice(i, 1)  } } }

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.