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

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

將官方的 Vuex 導(dǎo)入進(jìn)來，因為我們的還沒有實現(xiàn)，現(xiàn)用一下官方的，來演示一下 mutations 的使用。

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

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

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

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

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

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

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

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

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

在 HelloWorld.vue 組件中編寫 myFn 方法：

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

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

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

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

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

代碼如下：

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

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

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

一樣的我編寫一個 initMutations 方法，這個方法接受一個 options, 這里的步驟和 getters 的步驟是一樣的，我們先來看一下代碼：

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

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

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

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

通過之前我們在使用 mutations 的時候，是通過 store.commit 方法來調(diào)用的，所以我們需要在 Store 上面添加一個 commit 方法，這個方法接受兩個參數(shù)，第一個參數(shù)是方法名，第二個參數(shù)是 payload，payload 是一個對象，這個對象中存放的是我們需要修改的數(shù)據(jù)。

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

代碼如下：

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

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

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

因為我們在 mutations 中修改的是 state 當(dāng)中的數(shù)據(jù)，state 并沒有實現(xiàn)雙向綁定，所以不改變是正常的。

那么在 mutations 中更改了 state 的數(shù)據(jù)之后，我們怎么去更新視圖呢？這里我們只需要將 state 變成雙向綁定的即可，這里我們使用 Vue 當(dāng)中的 util 工具類來進(jìn)行快速實現(xiàn)雙向綁定。

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

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

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

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

代碼如下：

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

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

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

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

最新評論