Vuex 의 이해 Mutations 의 용법 인 스 턴 스

1.mutations 란 무엇 인가?
이전 글에서 말 한getters은 초보적인 획득 과 간단 한 처리state안의 데이터(이곳 의 간단 한 처 리 는 state 안의 데 이 터 를 바 꿀 수 없다)를 위 한 것 이다.Vue의 보 기 는 데이터 에 의 해 작 동 된다.즉,state안의 데 이 터 는 동태 적 으로 변화 한 것 이다.그러면 어떻게 바 꿀 까?Vuex에서store데이터 가 바 뀌 는 유일한 방법 은mutation이라는 것 을 명심 하 세 요!
통속 적 인 이해mutations에는 데이터 방법 을 바 꾸 는 집합 이 담 겨 있다.이것 은Veux디자인 의 중요 한 점 이다.바로 데이터 논리 처리 방법 을 모두mutations에 넣 어 데이터 와 보 기 를 분리 시 키 는 것 이다.
2.mutations 는 어떻게 사용 하나 요?
mutation 구조:각각mutation문자열 형식의 이벤트 형식type과 리 셋 함수handler가 있 습 니 다.{type:handler()},는 구독 발표 와 유사 하 다 고 이해 할 수 있 습 니 다.먼저 이 벤트 를 등록 하고 응답 유형 을 터치 할 때 호출handker(),호출type할 때 사용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):간단 한 이 해 는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
 }
}
})

commt:제출 은 구성 요소 에서 this.$store.commit('xxx')제출mutation을 사용 하거나mapMutations 보조 함 수 를 사용 하여 구성 요소 의methods 맵 을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.소스 코드 분석registerMutation:초기 화mutation

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

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:구독store의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)
  }
 }
 }

 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.