今天是關於vuex的最後一篇文章了！怎麼說呢？且行且珍惜吧!！認真嘗試每一行程式碼！

之前的文章當中，我們把所有的資料都存放到了 vuex資料夾當中的store.js當中。但隨著將來專案的複雜度增大，共享的狀態越來越多，越來越複雜！在這個時候我們需要將狀態根據功能來對其進行模組化，同時也是為了便於將來的維護，所以分開寫會更好一些。
今天我們主要來學習一下module:狀態管理器的模組化操作。
假如專案中包括兩個模組，分別為廣告模組與使用者模組。
首先在src資料夾下新建一個vuex資料夾，然後在該資料夾下新建一個index.js檔案用於生成Store物件。然後在vuex資料夾下新建adv與user資料夾，最後分別在這兩個資料夾內建立一個index.js檔案。如圖

//在該檔案中可以單獨設定adv相關的狀態
const state={
    //定義狀態資料userName
    advName:"我是一個通欄廣告！"
}
export default {
    state,//將state進行輸出
}

vuex/user/index.js檔案存放的是使用者模組內容。程式碼為：

//在該檔案中可以單獨設定user相關的狀態
const state={
    //定義狀態資料userName
    userName:"張培躍"
}
export default {
    state,//將state進行輸出
 

}

在vuex/index.js中引入剛才定義的兩個模組，並通過modules匯出：

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
import axios from "axios";
import adv from "./adv";//引入vuex的adv模組
import user from "./user";//引入vuex的user模組
Vue.use(Vuex);//使用vuex
export default new Vuex.Store({//暴露Store物件
    modules:{
        adv,//adv狀態
 

        user//user狀態
    }
})

配置main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'//匯入vuex,index.js為預設選 中資料夾，在此可以省略
Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,//新增store
    components: { App },
    template: '<App/>'
})

在模板中使用的格式為$store.state.模組名.state屬性名：

<div id="app">
   <p>advName:{{$store.state.adv.advName}}</p>
   <p>userName:{{$store.state.user.userName}}</p>
</div>

輸出的格式可以簡化，將computed（計算屬性）調整下：

export default {
    name: 'App',
    computed:{
        advName(){
            return this.$store.state.adv.advName;
        },
        userName(){
            return this.$store.state.user.userName;
        }
    }
}

然後模組中直接呼叫計算屬性即可：

<div id="app">
   <p>advName:{{advName}}</p>
   <p>userName:{{userName}}</p>
</div>

或者通過mapState來對computed進行設定,首先引入mapState:

import {mapState} from "vuex";

然後修改computed:

export default {
    name: 'App',
    computed:{
        ...mapState({
            advName(state){
                console.log(state);
                return state.adv.advName;
            },
            userName(state){
                return state.user.userName;
            }
        })
    }
}

最後在頁面中渲染的內容為：

advName:我是一個通欄廣告！
userName:張培躍

接下來，我們來看一下如何通過mutation改變狀態值。

首先在adv/index.js中新增一個mutation方法SET_ADVNAME用於改變advName狀態:

const mutations={
    //state為當前狀態物件，v為按收的值
    SET_ADVNAME(state,v){
        state.advName=v;
    }
}

在模板中呼叫，直接通過$store.commit(‘方法名’,傳遞引數)。

<div id="app">
   <p>advName:{{advName}}</p>
   <p>userName:{{userName}}</p>
   <p><input type="button" value="改變advName" @click="$store.commit('SET_ADVNAME','我是一個富媒體廣告')"></p>
</div>

現在，在user/index中也新增一個mutation方法SET_ADVNAME，這次改變的是userName狀態:

const mutations={
    //state為當前狀態物件，v為按收的值
    SET_ADVNAME(state,v){
        state.userName=v;
    }
}

最後點選按鈕，你會發現兩個模組中的SET_ADVNAME均被觸發了！這說明mutation是不區分模組的。如果在不同模組中的mutation出現同名的方法，都會執行。

getters與actions與之前的定義與調取是一樣的，在此就不再描述了！

關於vuex共七篇文章，已完結！希望可以對各位學習vuex有所幫助！

作業：

• 嘗試getters與actions的定義與調取.
• 嘗試getters與actions出現同名，結果會怎樣？（嘗試一下，估計和你想的不一樣哦）