VuexのMuttions

Vuexでstoreデータを変える唯一の方法はmuttionsを提出することです.muttionsの中にはデータ方法を変える集合があります.これはVuex設計の重要な点です.データ論理処理方法を全部muttionsに入れて、データとビューを分離させます.
Muttions使用
Vuexのmuttionsは、イベントに非常に似ています.各muttionsには文字列のイベントタイプと一つのコールバック関数があります.{type:handler()}としても理解できます.これは購読発表と似ています.イベントを登録しておき、応答タイプをトリガする場合はhandker()を呼び出し、typeを呼び出す場合はstore.com mmit方法が必要です.
例:
このコールバック関数は、最初のパラメータとしてstateを受け取ります.

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
         //      type   increment
        increment (state) { 
            //     
            state.count++
        }
    }
})

store.mutations.increment()を直接使用して呼び出すことはできません.Vuexはstore.commitを使用して対応するtypeをトリガする方法を定めています.

store.commit('increment')

提出荷重(Payload)
負荷の簡単な理解は、handler(state)へhandler(state, pryload)を転送することである.
例:
ほとんどの場合、負荷は対象となります.

mutations: {
  //     
  increment (state, payload) {
    state.count += payload.amount
  }
}

提出荷重には2つの方法があります.

//     type    
store.commit('increment', {
  amount: 10
})

//            mutation  
store.commit({
  type: 'increment',
  amount: 10
})

私たちは自分の好みによってどの提出方法を選ぶことができますか?
comit
私たちはコンポーネントの中でthis.$store.commit('xxx')を使用してmuttionsを提出することができる.
例:

export default {
    computed:{
        count(){
            return this.$store.state.count
        }
    },
    methods:{
        increment(){
        //   store.commit         (mutations   ) 
              this.$store.commit('increment');
        },
        decrement(){
              this.$store.commit('decrement');
        }
    }
}

あるいは、コンポーネント内のmethodsは、mapMuttions補助関数を使用してstore.commit呼び出しにマッピングされてもよい(ルートノードにstoreを注入する必要がある).
例:
mapMuttions補助関数を使用する前に、同様に最初に導入する必要があります.

import { mapMutations } from 'vuex'
export default {
    computed:{
        count(){
            return this.$store.state.count
        }
    },
    methods:{
        ...mapMutations([
            'increment',
            'decrement'
        ])
    }
}

MuttionsはVueの応答規則を守る必要があります.
Vuexのstoreの状態は応答式ですので、状態を変更すると、監視しているVueコンポーネントも自動的に更新されます.
これはVuexのmuttionsもVueを使うように注意事項を守る必要があります.

は、先にstoreで必要なすべての属性を初期化したほうがいいです.

オブジェクトに新しい属性を追加する必要がある場合は、Vue.set(obj, 'newProp', 123)を使用したり、古いオブジェクトを新しいオブジェクトに置き換えたりします.例えば、オブジェクト展開演算子を利用して、state.obj = {...state.obj, newProp: 123 }と書くことができる.

Muttionsイベントの種類を定数で置換する
muttionsイベントタイプを定数で置換することは、様々なFlux実装において一般的なモードである.このように、linterなどのツールを機能させ、同時にこれらの定数を個別のファイルに置くことで、コード協力者がap全体に含まれているmuttionsを一目でわかるようにすることができます.

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.jsファイルの内容は以下の通りです.

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

私たちは、mutationがstore.commit('increment')によって呼び出されることを知っています.increment方法は文字列で代入されています.プロジェクトが小さいなら、一人で開発すればいいですが、プロジェクトが大きくなりました.コードを作る人が多くなりました.
ですから、多くの人が協力しなければならない大型プロジェクトの中で、常に量の形式でmutationを処理したほうがいいです.
同期関数が必要です.
私たちが覚えているのは、Mutationは同期関数でなければなりません.
私たちがmutationを提出することによって状態データを変えるのは、状態の変化をより明確に追跡したいからです.次のような非同期の場合:

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

いつ状態が変わるか分かりませんので、追跡もできません.これはMutationのデザインの初心者とは違っていますので、同期関数である必要があります.

store.commit('increment') //    'increment'