經(jīng)過(guò)上一篇章介紹，完成了實(shí)現(xiàn) getters 的功能，那么接下來(lái)本篇將會(huì)實(shí)現(xiàn) mutations 的功能。

在實(shí)現(xiàn)之前我們先來(lái)回顧一下 mutations 的使用。

將官方的 Vuex 導(dǎo)入進(jìn)來(lái)，因?yàn)槲覀兊倪€沒(méi)有實(shí)現(xiàn)，現(xiàn)用一下官方的，來(lái)演示一下 mutations 的使用。

mutations 是用來(lái)修改共享數(shù)據(jù)的，先在 mutations 中定義一個(gè)方法，這個(gè)方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是 state，第二個(gè)參數(shù)是 payload，payload 是一個(gè)對(duì)象，這個(gè)對(duì)象中存放的是我們需要修改的數(shù)據(jù)。

addNum(state, payload) {
    state.num += payload;
},

在 state 當(dāng)中定義 num：

接下來(lái)就是使用了，使用的時(shí)候需要使用 commit 方法，commit 方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是方法名，第二個(gè)參數(shù)是 payload，payload 是一個(gè)對(duì)象，這個(gè)對(duì)象中存放的是我們需要修改的數(shù)據(jù)。

隨便找一個(gè)組件，先展示我們的 num，然后在編寫(xiě)一個(gè)按鈕，點(diǎn)擊按鈕之后調(diào)用 addNum 方法，傳入一個(gè)參數(shù) 10，這樣就可以實(shí)現(xiàn) num 的增加了。

展示 num，我這里在 HelloWorld.vue 組件中進(jìn)行展示的：

<template>
  <div class="hello">
    <p>{{ this.$store.state.num }}</p>
  </div>
</template>

展示完畢之后在編寫(xiě)一個(gè)按鈕，點(diǎn)擊按鈕之后調(diào)用 addNum 方法：

<button @click="myFn">我是按鈕</button>

在 HelloWorld.vue 組件中編寫(xiě) myFn 方法：

myFn() {
  this.$store.commit('addNum', 10);
},

好了到這里，我們的基本結(jié)構(gòu)搭建完畢，運(yùn)行一下，看看效果：

這個(gè)就是 mutations 的基本使用，那么了解完和回顧完畢之后，接下來(lái)我們就來(lái)實(shí)現(xiàn) mutations 的功能。

其實(shí) mutations 的實(shí)現(xiàn)和 getters 的實(shí)現(xiàn)差不多，好，我們廢話不多說(shuō)，直接來(lái)處理下吧，我先將上一篇處理 getters 的代碼封裝下，然后再來(lái)處理 mutations 的代碼。

我單獨(dú)抽取一個(gè) initGetters 來(lái)做這個(gè)事情，這樣代碼就清晰了很多，這個(gè) initGetters 方法接受一個(gè) options，然后在將之前處理的代碼放進(jìn)去即可。

代碼如下：

constructor(options) {
    this.state = options.state;
    // 將傳遞進(jìn)來(lái)的 getters 放到 Store 上
    this.initGetters(options);
}

initGetters(options) {
    // 1.拿到傳遞進(jìn)來(lái)的getters
    let getters = options.getters || {};
    // 2.在Store上新增一個(gè)getters的屬性
    this.getters = {};
    // 3.將傳遞進(jìn)來(lái)的getters中的方法添加到當(dāng)前Store的getters上
    for (let key in getters) {
        Object.defineProperty(this.getters, key, {
            get: () => {
                // 4.將getters中的方法執(zhí)行, 并且將state傳遞過(guò)去
                return getters[key](this.state);
            }
        })
    }
}

這樣我們的 getters 就處理完畢了，接下來(lái)我們就來(lái)處理 mutations 的代碼。

一樣的我編寫(xiě)一個(gè) initMutations 方法，這個(gè)方法接受一個(gè) options, 這里的步驟和 getters 的步驟是一樣的，我們先來(lái)看一下代碼：

initMutations(options) {
    // 1.拿到傳遞進(jìn)來(lái)的mutations
    let mutations = options.mutations || {};
    // 2.在Store上新增一個(gè)mutations的屬性
    this.mutations = {};
    // 3.將傳遞進(jìn)來(lái)的mutations中的方法添加到當(dāng)前Store的mutations上
    for (let key in mutations) {
        this.mutations[key] = (payload) => {
            mutations[key](this.state, payload);
        }
    }
}

這樣 Store 上面就有了一個(gè) mutations 的屬性，這個(gè)屬性中存放的是我們傳遞進(jìn)來(lái)的 mutations 方法，先來(lái)驗(yàn)證一下，打開(kāi)瀏覽器，看看效果：

注意點(diǎn)：記得將官方的 Vuex 注釋掉，用我們自己的 Nuex。

這樣我們的 mutations 就處理完畢了，接下來(lái)我們就來(lái)處理一下 commit 方法。

通過(guò)之前我們?cè)谑褂?mutations 的時(shí)候，是通過(guò) store.commit 方法來(lái)調(diào)用的，所以我們需要在 Store 上面添加一個(gè) commit 方法，這個(gè)方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是方法名，第二個(gè)參數(shù)是 payload，payload 是一個(gè)對(duì)象，這個(gè)對(duì)象中存放的是我們需要修改的數(shù)據(jù)。

commit 方法具體的實(shí)現(xiàn)代碼邏輯就是去 mutations 中找到對(duì)應(yīng)的方法，然后執(zhí)行這個(gè)方法，將 state 和 payload 傳遞過(guò)去。

代碼如下：

commit(type, payload) {
    this.mutations[type](payload);
}

實(shí)現(xiàn)了 commit 方法之后，我們就可以在組件中使用了，我們先來(lái)驗(yàn)證一下，打開(kāi)瀏覽器，看看效果：

我這里不截圖了，效果就是點(diǎn)擊了按鈕發(fā)現(xiàn) num 值并沒(méi)有發(fā)生變化，這是為什么呢？

因?yàn)槲覀冊(cè)?mutations 中修改的是 state 當(dāng)中的數(shù)據(jù)，state 并沒(méi)有實(shí)現(xiàn)雙向綁定，所以不改變是正常的。

那么在 mutations 中更改了 state 的數(shù)據(jù)之后，我們?cè)趺慈ジ乱晥D呢？這里我們只需要將 state 變成雙向綁定的即可，這里我們使用 Vue 當(dāng)中的 util 工具類來(lái)進(jìn)行快速實(shí)現(xiàn)雙向綁定。

正好呢通過(guò)這個(gè)問(wèn)題，可以讓大家知道在 Vue 中的 util 工具類中提供了有一個(gè)方法叫做 defineReactive，這個(gè)方法可以讓我們的數(shù)據(jù)變成雙向綁定的。

通過(guò)這個(gè)方法就可以快速的將某個(gè)數(shù)據(jù)變成雙向綁定的數(shù)據(jù)，defineReactive 這個(gè)方法接收三個(gè)參數(shù)：

• 第一個(gè)參數(shù): 要給哪個(gè)對(duì)象添加屬性
• 第二個(gè)參數(shù): 要給指定的對(duì)象添加什么屬性
• 第三個(gè)參數(shù): 要給這個(gè)屬性添加什么值

好了，廢話不多說(shuō)，我們直接來(lái)處理一下吧，我們先導(dǎo)入 Vue，就可以通過(guò) Vue.util.defineReactive 來(lái)調(diào)用這個(gè)方法了。

代碼如下：

Vue.util.defineReactive(this, 'state', options.state);

本章的重點(diǎn)就是要知道在 Vue 當(dāng)中有 defineReactive 方法，這個(gè)方法可以讓我們的數(shù)據(jù)變成雙向綁定的，這樣我們就可以在 mutations 中修改 state 的數(shù)據(jù)之后，視圖也會(huì)發(fā)生變化了。

這樣我們的 state 就變成了雙向綁定的了，驗(yàn)證一下，打開(kāi)瀏覽器，看看效果即可，好了到這里，我們的 mutations 就處理完畢了。

以上就是詳解vuex中mutations方法的使用與實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vuex mutations的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論