Comment comprendre les mutations dans Vuex ? Comment l'utiliser ?

Recommandations associées : "Tutoriel vue.js"

Une compréhension commune des mutations, qui contient un ensemble de méthodes pour modifier les données, ce est Vuex Un point très important dans la conception est de placer toutes les méthodes logiques de traitement des données dans des mutations pour séparer les données et les vues.

Comment utiliser les mutations ?

Structure de mutation : chaque mutation a un type d'événement de type chaîne (type) et une fonction de rappel (gestionnaire), qui peuvent également être compris comme {type:handler()}, ce qui est quelque peu similaire à la publication par abonnement. Enregistrez d'abord l'événement et appelez handker() lorsque le type de réponse est déclenché. Lors de l'appel du type, vous devez utiliser la méthode store.commit.

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

Payload : Une compréhension simple consiste à transmettre le paramètre handler(stage, payload) dans handler(stage) ; il s'agit généralement d'un objet.

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

mutation-types : placez les constantes dans des fichiers séparés pour faciliter le développement collaboratif.

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 : vous pouvez utiliser this.$store.commit('xxx') pour soumettre des mutations dans le composant, ou utiliser la fonction auxiliaire mapMutations pour ajoutez la mutation au composant. Les méthodes sont mappées aux appels store.commit (le magasin doit être injecté dans le nœud racine).

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

Analyse du code source

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

abonnés : s'abonner à la mutation du magasin

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

Pour plus de connaissances sur la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!