vuex入門篇 -- mutation和actio

前言

以前咱們專門介紹了vuex之中的狀態部分，state和getter。vuex之中有一張過程圖，展現的是vuex按照flux結構來管理咱們的狀態，用戶經過dispatch或者commit來進行內容修改的提交，vuex將會自動的按照action -> mutation -> state的形式來進行內容的變動管理和記錄。因此本篇文章咱們將會介紹學習，vuex之中的變動函數這一塊，mutation和action。

---

mutation

mutation之中操做的是一系列的同步函數，用於修改state之中的變量的狀態的，當使用vuex的時候咱們須要經過commit來進行提交咱們須要操做的內容，而後vuex將會自動的依據類型來肯定執行的操做，並將相關的參數傳遞給方法。

實際上這樣的操做很像是事件的觸發方式，commit就是那個觸發事件的方法，而mutation就是事件類型，相關參數就是咱們觸發事件的時候須要傳遞的參數內容。

vuex在咱們經過commit觸發了mutation以後觸發了哪些操做呢。先將參數整理就不說了，而後vuex會對於當前參數進行必定過篩。以後就是查詢比對是否有註冊了名爲type的mutation，並將其放置在一個執行列表之中，設置 $commiting來肯定提交狀態，並開始執行mutation列表內容內容。執行完成以後修改回$commiting的狀態，判斷當前的環境是不是生產環境。若是不是，這將當前的執行內容記錄下載。最後就執行完成了。

那麼咱們如何使用mutation呢，實際上也就是相似以前state之中的三種方式。

• this指針中的$store絕對的萬能，同時也絕對的耦合。$store之中有commit方法。咱們能夠直接調用。傳遞的參數有 （type， params）, 其中的type表示的是mutation的名稱，params能夠是任意參數，最經常使用的固然仍是對象了，type也能夠和params結合成爲一個對象內容喲，簡化書寫。固然了namespaced的影響仍是在的，當模塊狀態管理對象設置了這一屬性的話，commit之中傳遞的type須要填寫的方式就變成了 模塊名稱/mutation名稱 。若是沒有設置的話則是直接填寫名稱就好。針對於重名問題，則徹底是事件響應的做風了，將全部名稱是這一類型的mutation提取出來，所有執行一遍。上代碼了： store.js之中的mutations設置代碼:

mutations: {
    changeAppName(state, params){
        state.appName = params();
    }
}

組建之中使用的代碼：
methods: {
    //首個參數傳遞單個type值（字符串），第二個參數傳遞須要的數據。
    changeAppName() {
        this.$store.commit('changeAppName', function(){
            return 'new app';
        })
    }，
    
    //傳遞當個對象最爲參數，此時須要在對象之中設置type屬性代表須要調用的mutation的名稱。
    changeUserName(){
        this.$store.commit({
            type:'changeUserName',
            userName: 'Arvin'
        })
    }
}
複製代碼

• 而後就是使用mapMutations，一樣的咱們須要引入這一方法。而後再methods之中添加咱們須要編寫的內容，參數是兩個（namespaced, ref），其中namespaced表示的是命名空間，ref傳遞的是數組或者對象。若是是對象的話，元素對應的方法傳遞的參數是commit方法。一樣的模塊狀態管理對象中的mutation是受到namespaced屬性設置的影響的，當設置了以後須要經過傳遞namespaced的值以後才能經過mapMutations獲取到。若是沒有的設置的話，實際上vuex將會把mutation註冊到根狀態管理對象下，因此能夠獲取的到的。咱們來看一段示例代碼吧：

傳遞的參數是對象：
methods: {
    ...mapMutations({
        changeAppName: (commit) => {
            commit("changeAppName", {
                appName: "new app"
            });
        }
    })
}

傳遞的參數是數組
methods: {
    ...mapMutations([
        "changeAppName",
        "changeUserName"
    ])
}

設置了namespaced以後獲取的方式（例如設置了user模塊）
methods: {
    ...mapMutations("user", [
        "changeAppName",
        "changeUserName"
    ])
}
複製代碼

• 最後依舊是經過createNamespacedHelpers方法來獲取模塊狀態管理對象之中的mutation，和以前state之中的形式相似，就很少作講解了。

• 有一個特殊點須要注意的是，在mutation之中咱們有的時候須要對state之中添加新的數據，咱們須要經過vue.set來進行內容的添加，這樣vuex才能順利的保證對新增數據的監控。vue.set方法主要使用了

---

actions

和mutation其實是相似的，值是action主要用於處理異步的操做，負責和後端進行交互內容，在flux之中action其實是在mutation以前進行的異步操做，因此咱們在結束了action操做以後須要再次的調用commit來進行內容的提交。

actions中的數據項方法的首個參數將會傳遞的是context（狀態描述對象），其中擁有屬性是vuex對象的簡化內容。咱們能夠izai其中湖區到commit方法，getters，state等基礎參數內容。在使用異步完成以後咱們能夠經過commit來直接調用mutation函數內容，完成變動。

dispatch方法來調用咱們須要使用的action。其主要傳遞的是action的類型，vuex將會在action之中進行過濾，找出註冊的全部的類型爲type的方法，並使用promiseAll來進行異步的操做。

P.S.這裏說明一下異步的過程，咱們可使用ES6之中的promise來進行異步操做同步化，同時能夠是用async來對異步進行同步化。着一部份內容撿回在ES學習之中進行進行詳細的說明，這裏只是一個建議。

actions使用的方式實際上就和mutation差很少，連帶着namespaced對其的影響都是類似的，我這邊就直接上代碼了，就再也不一個個詳細說明了。

store.js的設置代碼：
import {getAppNameFromBackend, getUserNameFromBackend} from './xxx'
{
    ...   //省略其餘設置的代碼，然咱們專心於actions吧。
    actions: {
        async getAppName(context){
            const { name } = await getAppNameFromBackend()
            context.commit("changeAppName", {
                appName: name
            })
        }
    }
},
modules:{
    user: {
        namespaced: true,
        ... 
        actions: {
            async getUserName(context) {
                const { name } = await getUserNameFromBackend()
                context.commit("changeUserName", {
                    userName: name
                })
            }
        }
    },
    users: {
        ...
        actions: {
            async getUserName(context) {
                ... 通user模塊之中的方法
            }
        }
    }
}


this指針形式的引入
changeAppName() {
    this.$store.dispatch('getAppName');
},

changeUserNameForUser(){
    this.$store.dispatch('user/getUserName')
},

changeUserNameForUsers(){
    this.$store.dispatch('getUserName')
}

經過mapActions引入
...mapActions([
    'getAppName',
    'getUserName'
]),

...mapActions('user', [
    'getUserName'
]);

複製代碼

---

結束

就到這裏結束吧，若有任何錯誤或者不通順指出，望能幫忙指出，讓咱們共同窗習共同成長，再見。