Comprendre l'utilisation des mutations dans vuex

Cet article présente principalement la compréhension de l'utilisation des mutations dans Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

1. des mutations ?

Le getters mentionné dans l'article précédent est destiné à l'acquisition préliminaire et au simple traitement des données dans state (le simple traitement ici ne peut pas modifier les données dans l'état), Vue La vue est pilotée par les données, ce qui signifie que les données dans state changent dynamiquement. Alors, comment les modifier ? N'oubliez pas que la seule façon de modifier les données dans Vuex est via store ! mutation

La compréhension populaire

contient un ensemble de méthodes pour modifier les données. C'est un point très important dans la conception de mutations, qui consiste à mettre toutes les méthodes logiques de traitement des données dans <.>. Séparez les données et les vues. Veuxmutations

2. Comment utiliser les mutations ?

structure de mutation : chaque

a un type d'événement de type chaîne (

) et une fonction de rappel (mutation), qui peut également être comprise comme type Ceci est un peu similaire à l’abonnement à l’édition. Enregistrez d'abord l'événement et appelez handler lorsque le type de réponse est déclenché. Lors de l'appel de {type:handler()},, vous devez utiliser la méthode handker(). typestore.commit

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

Charge utile : la compréhension simple est de passer le paramètre

dans

 ; handler(stage)handler(stage,pryload)

 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 : La soumission peut être effectuée dans le composant en utilisant

commit

, ou en utilisant la fonction d'assistance this.$store.commit('xxx') pour le mettre dans le composant Le mutation est mappé à l'appel mapMutations (doit injecter methods au nœud racine). store.commit store

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. Analyse du code source

 : Initialisation

registerMutationmutation

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

 : Appelez

commitmutation

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

 : Abonnez-vous aux

subscribersstoremutation

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

Recommandations associées :

vuex Combiné avec localstorage pour surveiller dynamiquement les changements de stockage

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!