Wie versteht man Mutationen in Vuex? Wie benutzt man es?

Verwandte Empfehlungen: „vue.js Tutorial“

Ein gemeinsames Verständnis von Mutationen, das eine Sammlung von Methoden zum Ändern von Daten enthält, also alle logischen Methoden für Verarbeitungsdaten werden in Mutationen platziert. Im Inneren sind Daten und Ansicht getrennt.

Wie nutzt man Mutationen?

Mutationsstruktur: Jede Mutation verfügt über einen Ereignistyp (Typ) vom Typ String und eine Rückruffunktion (Handler), die auch als {type:handler()} verstanden werden kann, was der Veröffentlichung im Abonnement etwas ähnelt. Registrieren Sie zuerst das Ereignis und rufen Sie handker() auf, wenn der Antworttyp ausgelöst wird. Beim Aufrufen des Typs müssen Sie die Methode store.commit verwenden.

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

Payload: Das einfache Verständnis besteht darin, den Parameter handler(stage, payload) an handler(stage) zu übergeben.

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

mutation-types: Legen Sie Konstanten in separate Dateien ab, um die gemeinsame Entwicklung zu erleichtern.

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 kann in der Komponente verwendet werden, um Mutationen zu übermitteln, oder die Hilfsfunktion „mapMutations“ verwenden, um Methoden in der Komponente Store.commit-Aufrufen zuzuordnen (muss sein). im Root-Knoten-Speicher injiziert). this.$store.commit('xxx')

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

Quellcode-Analyse

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: Mutation aufrufen

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作为参数传入
 }
}

Abonnenten: Store-Mutation abonnieren

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

Weitere Programmierkenntnisse finden Sie unter:

Programmierlehre! !

Das obige ist der detaillierte Inhalt vonWie versteht man Mutationen in Vuex? Wie benutzt man es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!