Vue 教程第十四 篇—— Vuex 之 mutation

Vuex——Mutation

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件，每一個 mutation 的方法都會有一個 state 的參數在 commit 的時候當回調形參傳過來，該形參就是 store.state

let mutations = {
    increment(_state){
        _state.count += 1;
    },
}

Mutation 傳參數——提交載荷（Payload）

能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：

let mutations = {
    increment(_state){
        _state.count += 1;
    },
}

this.$store.commit('increment', 10);

大多數狀況下要傳多個參數，可是 mutation 的方法最多隻有兩個參數，一個是 state，另外一個是 payload，因此參數能夠用對象的方式去傳。

Mutation 觸發之 mapMutations 篇

<input type="button" value="increment" @click="increment(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: mapMutations(['increment'])
</script>

Mutation 觸發之 mapMutations 別名篇

<input type="button" value="increment" @click="add(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: mapMutations({
        add: 'increment'
    })
</script>

Mutation 觸發之對象展開運算符篇

<input type="button" value="increment" @click="increment(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: {
        ...mapMutations(['increment']),
    }
</script>

Mutation 觸發之對象展開運算符別名篇

<input type="button" value="increment" @click="add(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: {
        ...mapMutations({
            add: 'increment'
        }),
    }
</script>

小結

官方文檔說 mutation 必須是同步函數，於我的而言，這個觀點不成立。在 mutation 中同步只是爲了能用 devtools 追蹤狀態變化。

固然對於開發者來講，用別人的框架，遵照別人的框架規則最起碼是沒有問題的。