摘要：學(xué)習(xí)筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發(fā)和接收事件，進一步起到通信的作用。倉庫包含了應(yīng)用的數(shù)據(jù)狀態(tài)和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。

學(xué)習(xí)筆記：狀態(tài)管理與Vuex

狀態(tài)管理與Vuex

非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發(fā)和接收事件，進一步起到通信的作用。

一個組件可以分為數(shù)據(jù)（model）和視圖（view），數(shù)據(jù)更新時，視圖也會自動更新。在視圖中又可以綁定一個事件，它們觸發(fā)methods里指定的方法，從而可以改變數(shù)據(jù)、更新視圖，這是一個組件基本的運行模式。

const store = new Vuex.Store({});

倉庫store包含了應(yīng)用的數(shù)據(jù)（狀態(tài)）和操作過程。Vuex里的數(shù)據(jù)都是響應(yīng)式的，任何組件使用同一store的數(shù)據(jù)時，只要store的數(shù)據(jù)變化，對應(yīng)的組件也會立即更新。

數(shù)據(jù)保存在Vuex選項的state字段內(nèi)。

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

在任何組件內(nèi)，可以直接通過$store.state.count讀取。

直接卸載template里顯得有點亂，可以用一個計算屬性來顯示：

    
首頁
    {{count}}


export default {
    computed: {
        count() {
            return $store.state.count;
        }
    }
}

在組件內(nèi)來自store的數(shù)據(jù)只能讀取，不能手動修改，修改store中數(shù)據(jù)的唯一途徑是顯式地提交mutations。

mutations是Vuex的第二個選項，用來直接修改state里的數(shù)據(jù)。

在組件內(nèi)，通過this.$store.commit方法來執(zhí)行mutations。

mutations還可以接受第二個參數(shù)，可以是數(shù)字、字符串或?qū)ο蟮阮愋汀?/p>

ES6語法

函數(shù)的參數(shù)可以設(shè)定默認(rèn)值，當(dāng)沒有傳入該參數(shù)時，使用設(shè)置的值。

increment(state,n=1)等同于：
    increment(state,n){
        n=n||1;
    }

提交mutations的另一種方式是直接使用包含type屬性的對象。

mutations里盡量不要異步操作數(shù)據(jù)，否則組件在commit后數(shù)據(jù)不能立即改變，而且不知道什么時候會改變。

高級用法

Vuex還有其他3個選項可以使用：getter、actions、modules。

getter能將computed的方法提取出來，也可以依賴其他的getter，把getter作為第二個參數(shù)。

action與mutation很像，不同的是action里面提交的是mutation，并且可以一步操作業(yè)務(wù)邏輯。

action在組件內(nèi)通過$store.dispatch觸發(fā)。

modules用來將store分割到不同模塊，當(dāng)項目足夠大時，store里的state、getters、mutations、actions會非常多，使用modules可以把它們寫到不同的文件中。

module的mutation和getter接收的第一個參數(shù)state是當(dāng)前模塊的狀態(tài)。在actions和getters中還可以接收一個參數(shù)rootState，來訪問根節(jié)點的狀態(tài)。

實戰(zhàn)：中央事件總線插件vue-bus

中央事件總線bus作為一個簡單的組件傳遞事件，用于解決跨級和兄弟組件通信的問題。

vue-bus插件給Vue添加一個屬性$bus，并代理$emit、$on、$off三個方法。

ES6語法

emit(event,..args)中的...是函數(shù)參數(shù)的解構(gòu)。因為不知道組件會傳遞多少個參數(shù)進來，使用...args可以把從當(dāng)前參數(shù)到最后的參數(shù)都獲取到。

使用vue-bus有兩點需要注意：

第一是$bus.on應(yīng)該在created鉤子內(nèi)使用，如果在mounted使用，它可能接收不到其他組件來自created鉤子內(nèi)發(fā)出的事件；

第二點是使用了$bus.on在beforeDestroy鉤子里應(yīng)該再使用$bus.off解除，因為組件銷毀后，就沒有必要把監(jiān)聽的句柄存儲在vue-bus中。

Vue插件

注冊插件需要一個公開的方法install，它的第一個參數(shù)時Vue構(gòu)造器，第二個參數(shù)是一個可選的選項對象。

See the Pen Vue插件 by whjin (@whjin) on CodePen.

前端路由與vue-router

SPA的核心就是前端路由，對于一個網(wǎng)址，每次GET或POST等請求在服務(wù)端有一個專門的正則配置列表，然后匹配到具體的一條路徑后，分發(fā)到不同的Controller，進行各種操作，最終將html或數(shù)據(jù)返回給前端，這樣就完成了一次IO。

前端路由，即由前端來維護一個路由規(guī)則。實現(xiàn)方式有兩種；

一種是利用url的hash，就是常說的錨點（#），JavaScript通過hashChange事件來監(jiān)聽url的改變；

另一種就是HTML5的history模式，它使url看起來像普通網(wǎng)站那樣，以/分割，沒有#，但也沒并沒有跳轉(zhuǎn)，不過使用這種模式需要服務(wù)端支持，服務(wù)端在接收到所有的請求后，都指向同一個html文件，不然會出現(xiàn)404。

因此，SPA只有一個html，整個網(wǎng)站所有的內(nèi)容都在這個html里，通過JavaScript來處理。

如果要獨立開發(fā)一個前端路由，需要考慮到頁面的可插拔、生命周期、內(nèi)存管理等問題。

vue-router

vue-router的實現(xiàn)原理與通過is特性實現(xiàn)動態(tài)組件的方法類似，路由不同的頁面事實上就是動態(tài)加載不同的組件。

創(chuàng)建一個數(shù)組來指定路由匹配列表，每一個路由映射一個組件：

const Routers = [
    {
        path: "/index",
        component: (resolve) => require(["./views/index.vue"], resolve)
    },
    {
        path: "/about",
        component: (resolve) => require(["./views/about.vue"], resolve)
    }
];

Routers里每一項的path屬性就是指定當(dāng)前匹配的路徑，component是映射的組件。

webpack會把每一個路由都打包為一個js文件，在請求道該頁面時，再去加載這個頁面的js，也就是異步實現(xiàn)的懶加載（按需加載）。這樣做的好處是不需要在打開首頁的時候就把所有的頁面內(nèi)容全部加載進來，只在訪問時才加載。

使用了異步路由后，變移除的每個頁面的js都叫做chunk（塊），它們命名默認(rèn)是0.main.js、1.main.js...
可以在webpack配置的出口output里通過設(shè)置chunkFilename字段修改chunk命名。

output: {
    publicPath: "/dist/",
        filename: "[name].js",
        chunkFilename: "[name].chunk.js"
}

有了chunk后，在每個頁面（.vue文件）里寫的樣式也需要配置后才會打包進main.css，否則仍然會通過JavaScript動態(tài)創(chuàng)建