Understand the usage of Mutations in vuex

This article mainly introduces the usage of mutations in vue, which has certain reference value. Now I share it with you. Friends in need can refer to it

1. What are mutations?

The getters mentioned in the previous article is for preliminary acquisition and simple processing of the data in state (the simple processing here cannot change the state The data inside), the view of Vue is driven by data, that is to say, the data inside state changes dynamically, so how to change it, remember to change it in Vuex中storeThe only way to change data is mutation!

Popular understandingmutations contains a collection of methods to change data. This is a very important point in Veux design, which is to combine logical methods for processing data. Put them all in mutations to separate data and views.

2. How to use mutations?

mutation structure: Each mutation has a string type event type (type) and callback function (handler ), can also be understood as {type:handler()},This is somewhat similar to subscription publishing. Register the event first, and call handker() when the response type is triggered. When calling type, you need to use the store.commit method.

const store = new Vuex.Store({
  state: {
    count: 1
    },
  mutations: {
  increment (state) {   //注册时间，type:increment，handler第一个参数是state；
     // 变更状态
    state.count++}}})
    
  store.commit('increment')  //调用type，触发handler（state）

Load (payload): The simple understanding is to pass the parameters to handler(stage)handler( stage,pryload);usually an object.

 mutations: {
 increment (state, n) {
   state.count += n}}
 store.commit('increment', 10)
mutation-types：将常量放在单独的文件中，方便协作开发。
  // mutation-types.js
 export const SOME_MUTATION = 'SOME_MUTATION'
  // store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

 const store = new Vuex.Store({
  state: { ... },
  mutations: {
   // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
  [SOME_MUTATION] (state) {
  // mutate state
 }
}
})

commit: Commit can be used in components this.$store.commit('xxx') Commitmutation, or use the mapMutations auxiliary function to map the methods in the component to the store.commit call (need to inject store at the root node ).

import { mapMutations } from 'vuex'

export default {

methods: {
 ...mapMutations([
  'increment' // 映射 this.increment() 为 
this.$store.commit('increment')]),
 ...mapMutations({
  add: 'increment' // 映射 this.add() 为 
this.$store.commit('increment')
 })}}

3. Source code analysis

registerMutation:Initializationmutation

function registerMutation (store, type, handler, path = []) {
 //4个参数，store是Store实例，type为mutation的type，handler，path为当前模块路径
  const entry = store._mutations[type] || (store._mutations[type] = 
[]) //通过type拿到对应的mutation对象数组
   entry.push(function wrappedMutationHandler (payload) {
   //将mutation包装成函数push到数组中，同时添加载荷payload参数  
   handler(getNestedState(store.state, path), payload)
   //通过getNestedState()得到当前的state，同时添加载荷payload参数
  })
 }

commit: Call mutation

commit (type, payload, options) {
 // 3个参数，type是mutation类型，payload载荷，options配置
  if (isObject(type) && type.type) {
    // 当type为object类型，
   options = payload
   payload = type
   type = type.type
 }
 const mutation = { type, payload }
 const entry = this._mutations[type]
  // 通过type查找对应的mutation
 if (!entry) {
 //找不到报错
  console.error(`[vuex] unknown mutation type: ${type}`)
  return
 }
 this._withCommit(() => {
  entry.forEach(function commitIterator (handler) {
  // 遍历type对应的mutation对象数组，执行handle（payload）方法
  //也就是开始执行wrappedMutationHandler(handler)
   handler(payload)
  })
 })
 if (!options || !options.silent) {
  this._subscribers.forEach(sub => sub(mutation, this.state))
  //把mutation和根state作为参数传入
 }
}

subscribers: Subscribe to store’s mutation

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)
  }
 }
 }

Related recommendations:

vuex combines localstorage to dynamically monitor storage changes

##

The above is the detailed content of Understand the usage of Mutations in vuex. For more information, please follow other related articles on the PHP Chinese website!