真正掌握vuex的使用方法（七）----完結

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

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

vuex/adv/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有所幫助！