[手把手式教程，適合新手入門Vuex]-Vuex入門實踐（中）

做者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：juejin.im/user/58c61b…

簡書：www.jianshu.com/u/cb1c3884e…

微信公衆號：土豆媽的碎碎念（掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術）

歡迎你們掃描微信二維碼進入羣聊討論(若二維碼失效可添加微信JEmbrace拉你進羣)

碼字不易，點贊鼓勵喲~

前言

上一篇文章 [手把手式教程，適合新手入門Vuex]-Vuex入門實踐（上），咱們一共實踐了Vuex的這些內容。

state-共享數據

在state中定義共享屬性，在組件中可以使用$store.state.屬性名訪問共享屬性。

mutations-修改共享數據

在mutations中定義修改共享數據的方法，在組件中可以使用$store.commit('方法名')同步修改共享屬性。

actions-異步修改共享數據

在actions中定義異步修改共享數據的方法，在組件中可以使用$store.dispatch('方法名')異步修改共享屬性。

getters-計算屬性

在getters中定義共享數據的計算屬性，在組件中可以使用$store.getters.計算屬性名訪問共享數據的計算屬性。

那本篇文章我將帶你們完成Vuex的多模塊實踐。

同時本篇文章也是Vuex系列的第二篇，第一篇請 點擊此處 閱讀。

建立多個store模塊

前面的文章中，咱們在Vuex的實例方法Store上分別建立了state、mutations、actions和getters這幾個配置選項。

能夠思考一下，當咱們的應用程序越發複雜時，組件之間須要共享的數據也在持續增長，那麼state、mutations、actions和getters配置項裏面的代碼會越發龐大。

所以爲解決此問題，Vuex支持每一個模塊定義本身的state、mutations、actions和getters。

多個Module配置

如今咱們來實踐一下多個module。

首先咱們在E:\MyStudy\test\VueDemo\src\vuex目錄下新建兩個文件：moduleA.js和moduleB.js。

接着分別編輯這兩個文件的state、mutations、actions和getters配置項。

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
const moduleA = {
    state:{
        counter: 100
    },
    mutations: {
        //遞增
        increase(state) {
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                    context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                    context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter*state.counter
        }
    }
}

export default moduleA
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
const moduleB = {
    state:{
        counter: 5
    },
    mutations: {
        //遞增
        increase(state) {
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                    context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state){
            return state.counter*state.counter
        }
    }
}

export default moduleB
複製代碼

能夠看到每一個module定義本身的state、mutations、actions和getters和直接寫在store.js中的語法相差無幾，只是單個module無需將這些選項掛載到vuex實例的Store方法上。

最後就是須要在store.js中編寫該模塊的state、mutations、actions和getters，而且配置這兩個module。

// E:\MyStudy\test\VueDemo\src\vuex\store.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA'
import moduleB from './moduleB'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        counter: 1000
    },
    mutations: {
        //遞增
        increase(state) {
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                    context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                    context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter*state.counter
        }
    },
    modules: {
        a: moduleA,
        b: moduleB
    }
})
複製代碼

store.js中對多個module的配置語法也比較簡單，即在modules中以字典的形式模塊名：模塊引用寫入便可。其他配置state、mutations、actions和getters的方法和前面的如出一轍。

Vuex多個module的配置完成，如今咱們分別按順序訪問store模塊、a模塊和b模塊的共享數據、同步/異步修改共享數據以及計算屬性訪問。

多個Module-共享數據訪問

多個Module這種狀況下，state中的共享數據被綁定在模塊上（模塊內部的state是局部的，只屬於模塊自己），所以咱們須要使用$store.state.模塊名稱去訪問不一樣模塊的共享數據。而對於store.js這個根模塊配置的state數據，直接使用$store.state訪問便可。

那麼總結一下：

訪問store根模塊counter的邏輯：$store.state.counter

訪問a模塊counter的邏輯爲：$store.state.a.counter 

訪問b模塊的counter的邏輯爲：$store.state.b.counter
複製代碼

如今咱們分別在App.vue組件中訪問store.js這個根模塊的counter和a模塊的counter數據，在Index.vue組件中訪問b模塊的counter數據。

在那個組件中訪問那個模塊的state無所謂，也能夠捨棄Index.vue，將全部代碼都寫在App.vue組件中。我在實踐時分開寫的目的只是想體現多個組件之間能夠共享Vuex中定義的數據。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 獲取共享數據 -->
    <h1>這裏是App組件</h1>
    <h3> App組件獲取共享數據 </h3>
    <h3>訪問根模塊counter——$store.state.counter : {{ $store.state.counter }} </h3>
    <h3>訪問a模塊counter——$store.state.a.counter : {{ $store.state.a.counter }} </h3>
    <hr/>
    <Index></Index>
  </div>
</template>

<script> import Index from './components/Index' export default { name: 'App', components: { Index } } </script>

<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<template>
    <div>  
        <h1>這裏是Index.vue組件</h1>
        <h3>Index組件獲取共享數據 </h3>
        <h3>訪問b模塊counter——$store.state.b.counter ：{{ $store.state.b.counter }}</h3>
    </div>
</template>
<script> export default { name: 'Index' } </script>
複製代碼

最後咱們啓動項目查看一下結果。

能夠看到，咱們已經成功的訪問到了不一樣模塊的counter數據。

多個Module-同步修改共享數據

修改共享數據

如今，咱們須要在App.vue組件中同步修改store根模塊、a模塊的數據，在Index.vue組件中同步修改b模塊的數據。

前面咱們說了state綁定在模塊上，而mutations它並無和模塊綁定。那麼根據 [手把手式教程，適合新手入門Vuex]-Vuex入門實踐（上） 這一篇文章中的總結，得知觸發counter遞增的方法爲$store.commit(‘increase’)。

因爲store根模塊、a模塊、b模塊中使counter遞增和遞減的mutations方法名都是如出一轍的，那麼當咱們之間使用$store.commit(‘increase’)去觸發counter遞增會出現什麼樣的結果呢？咱們來試一下。

首先在store根模塊、a模塊、b模塊中的mutations increase中添加打印console.log的打印信息，其他代碼沿用前面的保存不變。

// E:\MyStudy\test\VueDemo\src\vuex\store.js
//遞增
increase(state) {
   console.log("store-increase")
   state.counter++
}
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
//遞增
increase(state) {
   console.log("moduleA-increase")
   state.counter++
},
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
//遞增
increase(state) {
   console.log("moduleB-increase")
   state.counter++
},
複製代碼

接着編寫App.vue和Index.vue的代碼。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 獲取共享數據 -->
    <h1>這裏是App組件</h1>
    <h3> App組件獲取共享數據 </h3>
    <h3>訪問根模塊counter——$store.state.counter : {{ $store.state.counter }} </h3>
    <h3>訪問a模塊counter——$store.state.a.counter : {{ $store.state.a.counter }} </h3>
    <h3>同步修改根模塊counter:<button @click="$store.commit('increase')">同步修改根模塊counter</button></h3>
    <h3>同步修改a模塊counter:<button @click="$store.commit('increase')">同步修改a模塊counter</button></h3>
    <hr/>
    <Index></Index>
  </div>
</template>

<script> import Index from './components/Index' export default { name: 'App', components: { Index } } </script>

<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<template>
    <div>  
        <h1>這裏是Index.vue組件</h1>
        <h3>Index組件獲取共享數據 </h3>
        <h3>訪問b模塊counter——$store.state.b.counter ：{{ $store.state.b.counter }}</h3>
        <h3>同步修改b模塊counter:<button @click="$store.commit('increase')">同步修改b模塊counter</button></h3>
    </div>
</template>
<script> export default { name: 'Index' } </script>
複製代碼

最後咱們來看下效果。

那麼現象就是：執行一次$store.commit('increase')會依次觸發store根模塊、a模塊和b模塊mutations中increase的執行。因此看到當點擊button時這三個模塊的counter都會加1。

關於觸發increase的順序呢，先是根模塊，而後是根據根模塊中modules的配置順序決定的。

這個操做呢只是我本身的一個小嚐試，真正多模塊的mutations也不會這樣去使用。那麼想避免上面問題的出現，咱們能夠避免多個模塊中的mutations方法的重名。

咱們來實踐一下，store模塊中mutations的increase名稱不作修改，只修改a、b這兩個模塊。

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
mutations: {
    //遞增
    increaseA(state) {
        console.log("moduleA-increase")
        state.counter++
    }
},
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
mutations: {
    //遞增
    increaseB(state) {
        console.log("moduleB-increase")
        state.counter++
    }    
},
複製代碼

而後對應的須要修改App.vue和Index.vue中觸發mutations的代碼（只貼出修改部分代碼）。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<h3>同步修改a模塊counter:<button @click="$store.commit('increaseA')">同步修改a模塊counter</button></h3>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<h3>同步修改b模塊counter:<button @click="$store.commit('increaseB')">同步修改b模塊counter</button></h3>
複製代碼

如今在看下效果。

能夠看到不一樣的按鈕觸發了不一樣的模塊的mutations。

命名空間

那麼還有一個問題，當module特別多時，其實不可避免真的會有重名的mutations，那麼此時Vuex的命名空間就須要上場了。

命名空間也很簡單，就是在模塊中添加一個配置namespaced:true。

如今咱們來實踐一下分別給模塊a和模塊b添加命名空間的配置，同時在把mutations中遞增的方法名稱統一改回increase。

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
// 省略部分代碼
const moduleA = {
    // 模塊A命令空間配置
    namespaced: true,
    state:{
        counter: 100
    },
    mutations: {
        //遞增
        increase(state) {
            console.log("moduleA-increase")
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    }
}

export default moduleA
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
// 省略部分代碼
const moduleB = {
    // 模塊B命令空間配置
    namespaced: true,
    state:{
        counter: 5
    },
    mutations: {
        //遞增
        increase(state) {
            console.log("moduleB-increase")
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    }
}

export default moduleB
複製代碼

當有了命令空間之後，觸發mutations的方法也就有了變化： $store.commit('模塊名/方法')。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<h3>同步修改根模塊counter:<button @click="$store.commit('increase')">同步修改根模塊counter</button></h3>
<h3>同步修改a模塊counter:<button @click="$store.commit('a/increase')">同步修改a模塊counter</button></h3>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<h3>同步修改b模塊counter:<button @click="$store.commit('b/increase')">同步修改b模塊counter</button></h3>
複製代碼

看下結果。

能夠看到命名空間的效果和前面修改mutations名稱不重複是一樣的效果。

多個Module-異步修改共享數據

異步修改共享數據的邏輯和前面同步修改的相同。

咱們在actions中定義了異步同名的遞增和遞減方法，執行一次$store.dispatch('increaseAction')，會依次觸發執行store、a模塊和b模塊的actions。一樣咱們能夠選擇讓不一樣模塊的actions方法名稱不重複，也可使用命名空間去解決。

這裏咱們只演示命名空間的方式去觸發不一樣module的actions。

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
const moduleA = {
    // 模塊A命令空間配置
    namespaced: true,
    state:{
        counter: 100
    },
    mutations: {
        //遞增
        increase(state) {
            console.log("moduleA-increase")
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                context.commit('decrement');
            },3000)
        }
    },
}

export default moduleA
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
const moduleB = {
    // 模塊B命令空間配置
    namespaced: true,
    state:{
        counter: 5
    },
    mutations: {
        //遞增
        increase(state) {
            console.log("moduleB-increase")
            state.counter++
        },
        //遞減
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action經過提交mutation改變共享數據狀態
                context.commit('decrement');
            },3000)
        }
    },
}
複製代碼

store.js保持不變

接着是組件中觸發actions的代碼。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<h3>異步修改根模塊counter:<button @click="$store.dispatch('increaseAction')">異步修改根模塊counter</button></h3>
<h3>異步修改a模塊counter:<button @click="$store.dispatch('a/increaseAction')">異步修改a模塊counter</button></h3>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<h3>異步修改b模塊counter:<button @click="$store.dispatch('b/increaseAction')">異步修改b模塊counter</button></h3>
複製代碼

如今咱們看下結果。

能夠看到配置命令空間後，已經成功的觸發了不一樣模塊同名的actions。

多個Module-計算屬性訪問

最後一部分就是多module的getters訪問了。

首先這個須要說明的是getters也沒有和模塊進行綁定，在咱們沒有給a和b模塊添加命名空間namespaced:true的配置前。由於多個模塊的getters存在重名屬性，所以控制檯能夠看到一個錯誤信息。

後面咱們在moduleA.js和moduleB.js中添加了命令空間的配置後該錯誤就不會在出現。我本身也測試了一下，一樣能夠像前面那樣，保證getters中的屬性不重名，直接使用$store.getters.屬性名去訪問不一樣模塊的getters。

下面來分別實踐一下兩種訪問getters的方式。

store.js中getters的屬性名不作修改，依然是doubleCounter；將moduleA.js中getters的屬性名改成doubleCounterA；將moduleB.js中getters的屬性名改成doubleCounterB。

// E:\MyStudy\test\VueDemo\src\vuex\moduleA.js
// 省略部分代碼
getters: {
     doubleCounterA(state) {
         return state.counter*state.counter
     }
}
複製代碼

// E:\MyStudy\test\VueDemo\src\vuex\moduleB.js
getters: {
     doubleCounterB(state) {
         return state.counter*state.counter
     }
}
複製代碼

接着就是在App.vue和Index.vue中訪問store模塊、a模塊和b模塊的計算屬性。

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<h3>訪問根模塊getters——$store.getters.doubleCounter : {{ $store.getters.doubleCounter }} </h3>
<h3>訪問a模塊getters——$store.getters.doubleCounterA : {{ $store.getters.doubleCounterA }} </h3>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<h3>訪問b模塊getters——$store.getters.doubleCounterB : {{ $store.getters.doubleCounterB }} </h3>
複製代碼

瀏覽器查看結果。

能夠看到已經成功的訪問到不一樣模塊的getters。

那麼最後咱們在嘗試將a、b兩個模塊的getters屬性名稱改回doubleCounter，使用命名空間的方式去訪問。

這裏不貼moduleA.js和moudleB.js的代碼了，直接修改App.vue和Index.vue中訪問getters的代碼

<!-- E:\MyStudy\test\VueDemo\src\App.vue -->
<h3>訪問根模塊getters——$store.getters.doubleCounter : {{ $store.getters.doubleCounter }} </h3>
<h3>訪問a模塊getters——$store.getters['a/doubleCounter'] : {{ $store.getters['a/doubleCounter'] }} </h3>
複製代碼

<!-- E:\MyStudy\test\VueDemo\src\components\Index.vue -->
<h3>訪問b模塊getters——$store.getters[''b/doubleCounter'] : {{ $store.getters['b/doubleCounter'] }} </h3>
複製代碼

瀏覽器查看結果。

能夠看到命名空間訪問成功。

前面訪問getters的邏輯代碼爲$store.getters.doubleCounter。所以在嘗試使用命名空間訪問getters時個人代碼爲$store.getters.a.doubleCounter。可是發現這種方法會報錯，所以靈機一動把代碼換成了$store.getters['a/doubleCounter']，最後訪問成功。

總結

到此本篇文章要總結的內容就完成了。篇幅比較長，可是也很簡單。

Vuex的前一篇文章和本篇文章，都是經過$store對象對state、mutations、actions和getters進行訪問和觸發的，所以下一篇文章將會介紹另一種比較經常使用的訪問觸發方式。

做者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：juejin.im/user/58c61b…

簡書：www.jianshu.com/u/cb1c3884e…

微信公衆號：土豆媽的碎碎念（掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術）

歡迎你們掃描微信二維碼進入羣聊討論(若二維碼失效可添加微信JEmbrace拉你進羣)

碼字不易，點贊鼓勵喲~