Mutations, as widely understood, contain a set of methods for changing data. This is an important point in Vuex design, which is to put all the logical methods for processing data into mutations, separating data and view.

How do you use mutations?

Mutation structure: Each mutation has a string-type event type (type) and a callback function (handler), also known as {type:handler()}, which is similar to subscriberpublishing. The event is registered first, and handker() is called when the response type is triggered. The store.mit method is used when type is called.

const store = new Vuex.Store({ state: { count: 1 }, mutations: Increment (state) {increment (state) {increment (state) {increment (state) {increment (state); // change status state.count++}}}) store.mit ('increment')Copy the code

Payload: a parameter is sent to a handler(stage,payload). It’s usually an object.

  mutations: {
 increment (state, n) {
     state.count += n}}
 store.commit('increment', 10)
Copy the code

Mutation -types: Place constants in separate files to facilitate collaborative development.

mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'
Copy the code

store.js

import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... Mutations: {// we can use ES2015 style computing attribute naming to use a constant as the function name [SOME_MUTATION] (state) {// mutate state}}})Copy the code

Commit: Commit can be done in components using this. codestore.com MIT (‘ XXX ‘) commit mutation, Or use the mapMutations helper function to map methods in a component to a store.mit call (requiring store injection at the root node).

import { mapMutations } from 'vuex' export default { methods: { ... MapMutations ([' increments' // map this. Increments () for this.store.com MIT (' increments ')]),... Apply mutations ({add: 'increment' // map this.add() to this.store.mit ('increment')})}Copy the code

Source code analysis

Function registerMutation (store, type, handler, path = []) { The path for the current module path const entry = store. _mutations [type] | | (store) _mutations [type] = []) through the type / / get the corresponding mutation array of objects Entry. Push (function wrappedMutationHandler (payload) { Handler (getNestedState(store.state, path), payload)Copy the code

Commit: call mutation

Commit (type, payload, options) {// 3 parameters, type is the mutation type, payload is the payload, If (isObject(type) && type.type) {// if type isObject,  options = payload payload = type type = type.type } const mutation = { type, Mutations [type] payload} const entry = this._mutations[type] Error (' [vuex] unknown mutation type: ${type} ') return} this._withcommit (() => {entry. ForEach (function commitIterator (handler) { Handle (payload) handler(payload) handler(payload)})}) if (! options || ! Options.silent) {this._subscribers. ForEach (sub => sub(mutation, this.state))}}Copy the code

Subscribers: Mutation of the subscription store

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

Develop reading

this.$store.dispatch('toShowLoginDialog',false)
this.$store.commit('toShowLoginDialog', true);
Copy the code

The main differences are:

  • Dispatch: contains asynchronous operations, such as submitting data to the background. Written as follows:This.$store.dispatch(' Action method name ', value)
  • Commit: indicates a synchronization operation.This. codestore.com MIT ('mutations method name ', value)