Verstehen Sie die Verwendung von Mutationen in Vuex

Dieser Artikel stellt hauptsächlich das Verständnis der Verwendung von Mutationen in Vue vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Mutationen?

Das im vorherigen Artikel erwähnte
dient der vorläufigen Erfassung und einfachen Verarbeitung der Daten in

(die einfache Verarbeitung hier kann die Daten im Status nicht ändern),

Die Ansicht wird durch Daten gesteuert, was bedeutet, dass sich die Daten in getters dynamisch ändern. Denken Sie daran, dass die einzige Möglichkeit, die Daten in state zu ändern, darin besteht, Vue zu ändern. stateVuexstore Populäres Verständnis mutation enthält eine Sammlung von Methoden zum Ändern von Daten. Dies ist ein sehr wichtiger Punkt im Entwurf von
, der darin besteht, alle logischen Methoden zur Datenverarbeitung in . Trennen Sie Daten und Ansichten.

mutationsVeux2. Wie nutzt man Mutationen? mutations

Mutationsstruktur: Jedes verfügt über einen Zeichenfolgentyp-Ereignistyp () und eine Rückruffunktion (
), die auch als

verstanden werden können ähnelt in gewisser Weise dem Abonnieren von Veröffentlichungen. Registrieren Sie zuerst das Ereignis und rufen Sie

auf, wenn der Antworttyp ausgelöst wird. Beim Aufruf von mutation müssen Sie die Methode type verwenden. handler{type:handler()},handker()type

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

store.commit

Nutzlast: Das einfache Verständnis besteht darin, den Parameter

an

zu übergeben; normalerweise handelt es sich um ein Objekt.

handler(stage)

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

handler(stage,pryload)

commit: Das Commit kann durch die Verwendung von

in der zu übermittelnden Komponente

oder mithilfe der

-Hilfsfunktion erfolgen Um

in der Komponente zu übergeben, wird 🎜> dem Aufruf

zugeordnet (muss this.$store.commit('xxx') in den Wurzelknoten einfügen). mutationmapMutations methods store.commit

import { mapMutations } from 'vuex'

export default {

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

store

3. Quellcode-Analyse

: Initialisierung

registerMutation

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

mutation

:anrufen

commit

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

mutation

:abonnieren

subscribersstore

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

mutation

Verwandte Empfehlungen:

vuex kombiniert localstorage, um Speicheränderungen dynamisch zu überwachen

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Verwendung von Mutationen in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!