2020-07-05

5 分鐘閱讀文 (大約 709 個字)

Vuex官方文檔閱讀筆記 - Mutations

之前的Vuex官方文檔筆記沒有寫完，來慢慢補上。

核心觀念 - Mutation

要更改stroe中的資料狀態，唯一的方法是使用store.commit方法來喚醒一個已註冊的事件。
store/index.js

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

mutation中的方法的第一個參數一定為state。increment是這個事件的名稱（官方文件稱為type，但名稱也許比較好理解？），後方接要執行的函式。
要注意，mutation看起來也許很像vue中的methods方法，但是他是不能被直接調用的，必須要store.commit呼叫這個mutation的名稱（type），才能執行它。

元件

1	store.commit('increment') //調用mutation必須使用store內的方法:commit

除了state之外，mutation也接受另外一個參數 - payload，要注意，它只能接受這兩個，因此若是有多個參數要傳入的話，可以將payload以物件形式傳入。

store/index.js

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

元件

            //事件名稱（type） payload
store.commit('increment', {
    amount:10
})

也可以用整個物件來包裹要傳入Mutation的參數

store.commit({
    //事件名稱
    type:'increment',
    //payload
    amount: 10
})

store中的寫法不變
store/index.js

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

命名方式的建議

Mutation的事件名稱可以全大寫命名（常數命名），方便辨識，也能讓linter工具（統一程式碼風格的工具）發揮作用，但這只是建議，尤其在多人協作時會更發揮效用。不過就算不這麼做也完全沒有關係。

store.commit({
    //事件名稱
    type:'INCREMENT',
    //payload
    amount: 10
})

store中的寫法不變
store/index.js

mutations:{
    INCREMENT(state, payload){
        state.count += payload.amount;
    }
}

Mutation的注意事項

Mutation必須要是同步函式，這意味著我們不能在mutation使用ajax，無論是setTimeout或是發送http請求，這是出於除錯上的考量，因為Vuex devtool會追蹤每一個mutation發生的時間點，若是Mutation被觸發，但是他的行為卻還沒完成，這種時間上的不同步會導致不必要的混亂。
那什麼時候才可以進行異步處理呢？之後會提到的Action。

輔助函式 - mapMutations

調用mutation除了在元件中使用this.$store.coommit('evtType事件名稱')，若是有多個mutation需要被調用，也可以使用mapMutation

使用方式跟前述的mapGetters等大同小異。

元件

import { mapMutations } from 'vuex';

export default{
    //...come code
    methods:{
        //展開
        ...mapMutations([
            'INCREMENT', //元件內使用方式: this.INCREMENT();
            //傳參數
            'INCREMENTBY', //元件內使用方式: this.INCREMENTBY(payload)
        ])
    }
}

資料來源

Vuex官方文檔

# Vue, Vuex, 閱讀筆記