5. Vuex Mutation

8576 ワード
10 Vue ステータスマネージャ
Vuex Mutation
  • Vuexのstoreの状態を変更する唯一の方法はmutationをコミットすることである.Vuexのmutationはイベントによく似ています.各mutationには文字列のイベントタイプ(type)とコールバック関数(handler)があります.注意mutationは同期関数でなければなりません.
  • Mutationの使用Mutationは、stateを最初のパラメータとして受け入れることができます
    const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      //     
      state.count++
    }
  }
})
    mutation handlerを直接呼び出すことはできません.このオプションは、イベント登録のようなものです.「incrementのタイプのmutationがトリガーされると、この関数が呼び出されます.」mutation handlerを起動するには、対応するtypeでstoreを呼び出す必要があります.commitメソッド:
    this.$store.commit('increment')
    荷重(Payload)(伝達パラメータ)store.commitに追加のパラメータ、すなわちmutationの荷重(payload):
    // ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

    this.$store.commit('increment', 10)
    荷重はほとんどの場合、荷重はオブジェクトであるべきです.これにより、複数のフィールドを含むことができ、記録されたmutationがより読みやすくなる:
    // ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
    オブジェクトスタイルのコミット方式(イベントと荷重のマージ)mutationをコミットする別の方法は、typeの属性を含むオブジェクトを直接使用する:
    this.$store.commit('increment', {
  amount: 10
})
    オブジェクトスタイルのコミット方式を使用すると、オブジェクト全体が荷重としてmutation関数に伝達され、したがってhandlerは変わらない:
    store.commit({
  type: 'increment',
  amount: 10
})
    MutationはVueの応答規則を遵守する必要があるVuexのstoreの状態が応答式である以上、状態を変更すると、状態を監視するVueコンポーネントも自動的に更新される.これは、VuexのmutationもVueを使用するのと同じようにいくつかの注意事項を遵守する必要があることを意味します:1.必要なすべてのプロパティをstoreで初期化したほうがいいです.2.オブジェクトに新しいプロパティを追加する必要がある場合は、
  • Vue.set(obj, 'newProp', 123)、または
    • を使用する.
  • 古いオブジェクトを新しいオブジェクトに置き換えます.たとえば、オブジェクト展開演算子を使用して、
    mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
    • と書くことができます.
    Mutationイベントタイプを定数で置換mutationイベントタイプを定数で置換することは、様々なFlux実装において一般的なモードである.これにより、linterなどのツールが機能し、これらの定数を個別のファイルに置くことで、コード協力者がapp全体に含まれるmutationを一目瞭然にすることができます.
    state.obj = { ...state.obj, newProp: 123 }
    は定数を使わずにあなたに依存します.複数の協力が必要な大規模なプロジェクトでは、これは役に立ちます.しかし、もしあなたが好きでないなら、あなたは完全にそうしなくてもいいです.mapMutationsアシスト関数の使用は、コンポーネント内でthis.$store.commit('xxx')を使用してmutationをコミットするか、mapMutationsアシスト関数を使用してコンポーネント内のmethodsをstore.commit呼び出しにマッピングすることができます(ルートノードにstoreを注入する必要があります).
    // 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
    }
  }
})
    HTMLにデータを格納する方法
    CSS 3 2 D変換3 D変換