摘要：個(gè)人看來，一個(gè)狀態(tài)管理的應(yīng)用，無論是使用，還是，最困難的部分是在的設(shè)計(jì)。中，并沒有移除，而是改為用于觸發(fā)。也是一個(gè)對(duì)象，用于注冊(cè)，每個(gè)都是一個(gè)用于返回一部分的。接受一個(gè)數(shù)組或?qū)ο?，根?jù)相應(yīng)的值將對(duì)應(yīng)的綁定到組件上。

系列文章:

Vue 2.0 升（cai）級(jí)（keng）之旅

Vuex — The core of Vue application (本文)

從單頁應(yīng)用(SPA)到服務(wù)器渲染(SSR)


當(dāng)今，談到狀態(tài)管理首先想到的肯定是 Redux，而隨著 Vue 2.0 的發(fā)布，Vuex 也伴隨著推出了最新版，本文就帶你對(duì)照 Redux 來看看剛剛出爐的 Vuex 2.0。
有關(guān) Redux 的基礎(chǔ)概念在本文中會(huì)簡要略過，如再一一贅述篇幅就太長了，不了解的可以看一下本人之前寫的有關(guān) Redux 的兩篇文章：

Redux 入門

Redux 進(jìn)階

眾所周知，一個(gè)應(yīng)用的外觀可以千變?nèi)f化，但無論如何變化，它都需要一樣?xùn)|西去支撐，那就是——數(shù)據(jù)。這個(gè)數(shù)據(jù)是廣義上的，可以是數(shù)據(jù)庫中的數(shù)據(jù)，也可以是當(dāng)前應(yīng)用所處的狀態(tài)，甚至可以是 WebRTC, Web Bluetooth 等一系列實(shí)時(shí)數(shù)據(jù)。

在 vue 應(yīng)用中，vuex 就充當(dāng)了數(shù)據(jù)提供者的角色，vue 則只需要關(guān)注頁面的展示與交互。

既然，明確了以 vuex 為核心，那么就來看看如何在 vue 應(yīng)用中使用 vuex？

隨著 Vue 2.0 的發(fā)布，Vuex 在近期也隨之推出 2.0 版。在上一篇文章中有提到作者的博客是用 vue 2.0 搭建的，但之前并沒有添加 vuex，現(xiàn)在正可以借此機(jī)會(huì)將 vuex 添加到項(xiàng)目中。

本文將介紹 Vuex 2.0 的同時(shí)，分享一些本人在這個(gè)過程中的一些心得。

首先，當(dāng)然是核心的核心 Store。

Store 用來存放整個(gè)應(yīng)用的 state。

那怎么建立 store 哪？由于，Vuex 2.0 剛剛推出，最新的 API 還得看 Release Note。

創(chuàng)建一個(gè) Store 非常簡單只需 new Vuex.Store({ ...options })，其中，options 可以是一下幾種：

state Object：存放應(yīng)用狀態(tài)

actions Object：注冊(cè) action

mutations Object：注冊(cè) mutation

getters Object：注冊(cè) getter

modules Object：注冊(cè) module

plugins Array：注冊(cè)中間件

strict Boolean：是否開啟嚴(yán)格模式，嚴(yán)格模式下所有對(duì) state 的變化必須通過 mutation 來修改，反之拋出異常，默認(rèn)不開啟。

或許你不了解這些屬性的含義，沒關(guān)系，之后每個(gè)還會(huì)分別解釋。

明白了屬性的含義，那么創(chuàng)建一個(gè) store 的代碼就可能會(huì)是這樣

// store.js
import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/logger";

import blog from "./module/blog";

// 在 Vue 中，注冊(cè) Vuex
Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    plugins: process.env.NODE_ENV !== "production" ? [createLogger()] : [],
    modules: {
        blog
    }
});

store 創(chuàng)建完成之后，就可以在根組件中使用了。

import Vue from "vue";
import store from "../vuex";
import router from "./router";
import "./blog";

new Vue({
    store,
    router,
    template: ""
}).$mount("#app");

個(gè)人看來，一個(gè)狀態(tài)管理的應(yīng)用，無論是使用 vuex，還是 redux，最困難的部分是在 store 的設(shè)計(jì)。

究竟該如何設(shè)計(jì)一個(gè) store，是根據(jù)組件的結(jié)構(gòu)層次設(shè)計(jì)對(duì)應(yīng)的 store，還是根據(jù)應(yīng)用數(shù)據(jù)來設(shè)計(jì) store？

由于，store 是存放整個(gè)應(yīng)用狀態(tài)的地方，所以，起初我認(rèn)為應(yīng)該是前者按組件的層次結(jié)構(gòu)去設(shè)計(jì)。這樣 store 中分別保存著每個(gè)組件的狀態(tài)，這對(duì)大型項(xiàng)目來說或許會(huì)造成大量的冗余數(shù)據(jù)存儲(chǔ)在 store 中，以及一些重復(fù)的工作，但這也提供了簡潔鮮明的層次結(jié)構(gòu)，增強(qiáng)了項(xiàng)目的可維護(hù)性，這對(duì)大型項(xiàng)目來說更至關(guān)重要。

但伴隨著寫項(xiàng)目時(shí)的思考，我漸漸推翻了之前的想法。

假設(shè)這樣一個(gè)場(chǎng)景，項(xiàng)目中有兩個(gè)互不相關(guān)的組件，但它們倆卻依賴同一份數(shù)據(jù)源。如果，這時(shí)采用之前的設(shè)計(jì)方法，那么這同一份數(shù)據(jù)源會(huì)被存放在 store 的兩個(gè)不同的位置。那么此時(shí)，如果一個(gè)組件需要對(duì)數(shù)據(jù)源進(jìn)行操作的話，它不但需要修改自己組件對(duì)應(yīng)的 state，同時(shí)還要發(fā)起 action 來修改另一個(gè)組件的 state，這恰恰違背了組件的單一性。

然而，使用應(yīng)用數(shù)據(jù)來設(shè)計(jì) store 就不會(huì)有這樣的問題。鑒于這個(gè)原因，我現(xiàn)在更傾向于第二個(gè)理念來設(shè)計(jì)整個(gè)應(yīng)用的 store。

所以，當(dāng)項(xiàng)目開始時(shí)，要考慮到整個(gè)應(yīng)用的數(shù)據(jù)模型來設(shè)計(jì) store 真是相當(dāng)麻煩啊。

談完了 store，就再一個(gè)個(gè)來看剛剛創(chuàng)建 store 時(shí)所提到的屬性，state 就是用來保存狀態(tài)的，沒啥好說的，直接來看看第二個(gè) actions。

actions 是一個(gè)對(duì)象，key 就是 action 的名字，value 就是對(duì)應(yīng)的 action。此處的 action，無論從名字，還是作用都和 redux 中的 action 相同，用于激發(fā) state 的變更。但是，它們的用法卻不相同。

Redux 中的 action 需要返回一個(gè) JS 對(duì)象，即使加了 thunk 中間件之后，能夠返回一個(gè)函數(shù)，但這個(gè)函數(shù)最終返回的還是一個(gè) JS 對(duì)象，最后通過，store.dispatch 該對(duì)象來觸發(fā) state 的變更。

然而，Vuex 中的 action 它本身就是一個(gè)方法，并且這個(gè)方法并不需要任何的返回，而是，通過 store.commit 來觸發(fā) mutation。

Vuex 2.0 中，已將原先的 store.dispatch 改名為了 store.commit 來觸發(fā) mutation。  
Vuex 2.0 中，并沒有移除 store.dispatch，而是改為用于觸發(fā) action。

所有 action 方法接受當(dāng)前 store 的實(shí)例作為第一個(gè)參數(shù)，調(diào)用傳遞的參數(shù)會(huì)作為第二個(gè)參數(shù)傳入（暫不支持多參數(shù)）。

mutations 也是一個(gè)對(duì)象，同 actions 類似，key 就是 mutation 的名字，value 就是對(duì)應(yīng)的 mutation。

mutation 用于更新應(yīng)用的 state。Redux 中雖然沒有 mutation 這個(gè)詞，但從上面的解釋就明白，這同 redux 中的 reduce 起著相同的作用。

但兩者在寫法上又有著不同，由于 vuex 中的 mutations 是一個(gè)對(duì)象，并借用 ES6 對(duì)象方法可以使用變量和省略的特點(diǎn)，調(diào)用 mutation 可以直接通過命名找到相應(yīng)的處理方法，這使得它比 redux 的一系列 switch/case 語句要更簡單、更優(yōu)雅。

更大的不同之處在于 redux 的 reduce 是要求返回一個(gè)新的 state，而 vuex 就如它的命名 mutations（變異）是對(duì)當(dāng)前 state 進(jìn)行操作，而不能返回一個(gè)新的 state，這里就和 FP 的理念有所沖突了。

// mutations.js
export default {
    // work
    [LOAD_SOCIAL_LINK](state = {}, mutation = {}) {
        state.socialLinkList = mutation.payload
            .filter(item => !!item.link)
            .map(item => ({
                ...item,
                svgPath: svgPath + "#" + item.name
            }));
    }
    
    // not work
    [LOAD_SOCIAL_LINK](state = {}, mutation = {}) {
        state = {
            ...state,
            socialLinkList: mutation.payload
                .filter(item => !!item.link)
                .map(item => ({
                    ...item,
                    svgPath: svgPath + "#" + item.name
                }))
        };
    }
};

單就這點(diǎn)來看，redux 略勝一籌。

Getters 也是一個(gè)對(duì)象，用于注冊(cè) getter，每個(gè) getter 都是一個(gè) function 用于返回一部分的 state。

getter 方法接受 state 作為第一個(gè)參數(shù)，一個(gè)簡單的 getters 就可能是這樣：

export default {
    // 省略...
    getters: {
        socialLinkList: state => state.socialLinkList
    }
};

掌握了 Store, Actions, Mutations 以及 Getters 這幾個(gè)概念，那你就掌握了 vuex 的核心，已經(jīng)完全可以創(chuàng)建一個(gè)完整的 store，并可以使用了。

但隨著項(xiàng)目的增長，你會(huì)發(fā)現(xiàn)將 Actions, Mutations, Getters 全都寫在一起非常難以維護(hù)，這時(shí)你會(huì)想念 Redux 中將 state 劃分處理的 combineReducers。

醒醒！別想 Redux 啦，Vuex 也可以劃分處理 state 樹，它就是接著就要提到的 modules。

Modules 的作用就如它的名字，劃分模塊。

它的屬性也是一個(gè)對(duì)象，key 是對(duì)應(yīng)的 module 名，在 state 中會(huì)創(chuàng)建相應(yīng)的 key，而 value 是一個(gè)用于配置如何創(chuàng)建 module 的對(duì)象，該對(duì)象的屬性基本同創(chuàng)建 store 時(shí)的 options 對(duì)象一樣，只少了最后 2 個(gè)還沒有講到的屬性 plugins 和 strict。這兩者是不是有什么關(guān)系哪？

class Store {
  constructor (options = {}) {
    // 省略...
    
    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], options)
    
    // 省略...
  }

從 vuex 創(chuàng)建的源碼中可以看到，其實(shí)，store 它本身就是一個(gè) module。

既然，modules 中能配置 modules 那就意味著：模塊是可以嵌套的。那么，使用 modules 就可以將 state 劃分為各個(gè)模塊，同 combineReducers 一樣可以化繁為簡，這對(duì)中大型項(xiàng)目來說必不可少。

一個(gè) module 的定義就可以是這樣。

// nav module
import mutations from "./mutations";
import actions from "./actions";

export default {
    state: {},
    getters: {
        navList: state => state.navList
    },
    actions,
    mutations
};

警報(bào)！前方第 6 行有坑，請(qǐng)速速繞行。

第 6 行？

state: {}, 初始化 state 能有什么問題??？

當(dāng)你運(yùn)行你的應(yīng)用的時(shí)候，你會(huì)發(fā)現(xiàn)，如果 navList 的變化是由一個(gè)同步的方法返回的就沒有問題，但如果，它是通過異步方法返回的，你會(huì)發(fā)現(xiàn)雖然控制臺(tái)上的 mutation log 輸出正確，但你的組件中并沒有得到正確的值。

因?yàn)?，?dāng) action 調(diào)用之后會(huì)計(jì)算一次 getter，如果是同步的，那么此時(shí) getter 的 state 中已經(jīng)保存著最新的數(shù)據(jù)。

但如果是異步的，那么此時(shí) getter 中的 state 是一個(gè)空對(duì)象，那么上例中的 state.navList 就會(huì)返回一個(gè) undefined。然而，undefined 就不會(huì)進(jìn)入 vue 的 watch 系統(tǒng)，所以當(dāng)異步請(qǐng)求結(jié)束后，即使 state 中對(duì)應(yīng)字段變?yōu)榱四繕?biāo)值，但也不會(huì)再調(diào)用 getter 了，組件中的值自然也不會(huì)更新了。

那怎么解決哪？那就是給 state 中的每個(gè)屬性設(shè)初始值，這樣在第一次計(jì)算 getter 的值時(shí)就會(huì)返回對(duì)應(yīng)的初始值，而這個(gè)初始值是在 vue 的系統(tǒng)中的，所以當(dāng)異步請(qǐng)求結(jié)束后調(diào)用 mutation 改變 state 中對(duì)應(yīng)的值后，getter 會(huì)自動(dòng)觸發(fā)更新，此時(shí)，組件中對(duì)應(yīng)的值也就被修改了。

所以，一定要記得：

為每個(gè)屬性設(shè)置初始化 state ?。。?/p>
為每個(gè)屬性設(shè)置初始化 state ?。?！
為每個(gè)屬性設(shè)置初始化 state ！??！

重要的話，說三遍?。?！

最后，在使用 modules 還需要注意，在不同 modules 下，注冊(cè)的 action 或 mutation 的名字重復(fù)并不會(huì)報(bào)錯(cuò)，但都會(huì)被調(diào)用，所以要注意命名。

好，modules 講完了，繼續(xù)看下一個(gè)屬性 plugins。

vuex 自 1.0 版開始就將原先的 middlewares 替換成了 plugins。也就是說，現(xiàn)在使用的 plugins 就是中間件。

plugins 的參數(shù)終于同之前的有所不同了，是一個(gè)數(shù)組，數(shù)組中的每一項(xiàng)都是一個(gè)方法，方法接受一個(gè)參數(shù)就是當(dāng)前 store 的實(shí)例。

    // vuex source code: apply plugins
    plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))

vuex 中間件的編寫理解起來也十分容易，就是通過 store.subscribe 來訂閱 mutation 的變化，這比 redux 中間件的工作原理更容易理解。

最后的 strict 屬性之前已經(jīng)提到了，就是用來設(shè)置時(shí)候開啟嚴(yán)格模式的，嚴(yán)格模式下，state 只能通過 mutation 來修改。

至此，創(chuàng)建 vuex store 的所有屬性都講完了，store 也就完成了，那么，vue 的組件該如何和 vuex 的 store 鏈接起來哪？

vuex 1.0 之前如何將 vuex 連接到組件在這里就不說了，有興趣可以上官網(wǎng)上看看。

主要來看看如何使用 vue 2.0 新增的 4 個(gè) helper 方法優(yōu)雅地將 vuex 連接到組件。

這 4 個(gè) helper 方法，分別是：

mapState

mapMutations

mapGetters

mapActions

常言道：口說無憑。

我們就來看一個(gè)博客升級(jí)中的簡單例子，沒有加入 vuex 前，本人博客的首頁是這樣設(shè)定的：

// home.js
import Vue from "vue";

import PostService from "../../../common/service/PostService";

import img from "../../../assets/img/home-bg.jpg";
import template from "./home.html";

const Home = Vue.extend({
    template,
    data: () => {
        return {
            header: {
                img,
                title: "D.D Blog",
                subtitle: "Share More, Gain More."
            },
            postList: []
        };
    },
    created() {
        const postService = new PostService();
        postService.queryPostList().then(({postList}) => (this.postList = postList));
    }
});

這里我們回顧一下之前的所講，為 home 組件創(chuàng)建對(duì)應(yīng)的 store module。

// index.js
// mutation types
const INIT_HOME_PAGE = "INIT_HOME_PAGE";
const LOAD_POST_LIST = "LOAD_POST_LIST";

// actions
const initHomePage = ({dispatch, commit}) => {
    commit(createAction(INIT_HOME_PAGE, {
        header: {
            image,
            title: "D.D Blog",
            subtitle: "Share More, Gain More."
        }
    }));
    dispatch("loadPostList");
};

const loadPostList = ({commit}) => {
    new PostService().queryPostList()
        .then((result = {}) => {
            commit(createAction(LOAD_POST_LIST, {
                postsList: result.postsList
            }));
        });
};

const actions = {initHomePage, loadPostList};

// mutations
const mutations = {
    [INIT_HOME_PAGE](state = {}, mutation = {}) {
        state.header = mutation.payload.header;
    },

    [LOAD_POST_LIST](state = {}, mutation = {}) {
        state.postsList = mutation.payload.postsList;
    }
};

export default {
    state: {
        header: {},
        postsList: []
    },
    getters: {
        postsList: state => state.postsList
    },
    actions,
    mutations
};

const createAction = (typeName = "", data = "") => ({ type: typeName, payload: data });

這里的 createAction 是自己創(chuàng)建的一個(gè)簡單函數(shù)，用于格式化 mutation 獲得的參數(shù)，這并不是必須的，vuex 的 commit 方法是接受參數(shù)為 (type, data) 的。

OK。對(duì)應(yīng)的 store module 也創(chuàng)建好了，就來改組件吧。

首先，應(yīng)用的狀態(tài)都來自于 store，那么組件中的 data 屬性自然就不用了，直接刪除。爽~

const Home = Vue.extend({
    template,
    created() {
        const postService = new PostService();
        postService.queryPostList().then(({postList}) => (this.postList = postList));
    }
});

其次，原先在 created hooks 里直接去查數(shù)據(jù)，現(xiàn)在用了 vuex 自然要通過調(diào)用 action 來獲取數(shù)據(jù)，這里就要用到 4 大金剛之一——mapActions 來獲取 vuex 中設(shè)定好的 action。

mapActions 接受一個(gè)數(shù)組或?qū)ο螅鶕?jù)相應(yīng)的值將對(duì)應(yīng)的 action 綁定到組件上。

import {mapActions} from "vuex";

const Home = Vue.extend({
    template,
    methods: mapActions(["initHomePage"]),
    created() {
        this.initHomePage();
    }
});

數(shù)據(jù)拿到了，怎么綁定到組件上哪？這就可以用到另兩個(gè) helper：mapState 和 mapGetters。

mapState 和 mapGetters 同樣接受一個(gè)數(shù)組或?qū)ο?，并根?jù)相應(yīng)的值將 store 中的 state 或 getter 綁定到組件上。

import vue from "vue";
import { mapState, mapGetters, mapActions } from "vuex";

import template from "./home.html";

const Home = vue.extend({
    template,
    computed: {
        ...mapState({
            header: state => state.home.header
        }),
        ...mapGetters(["postsList"])
    },
    methods: mapActions(["initHomePage"]),
    created() {
        this.initHomePage();
    }
});

哈哈，這樣模板不用改變一分一毫，升級(jí)就完成啦~

是不是很簡潔，很優(yōu)雅~

容器組件和展示組件這個(gè)概念在 Redux 入門一文中已有提到。然而，這個(gè)概念并不只服務(wù)于 react，在 vue 中也可以用到。

簡單來說，容器組件就是用于包裹展示組件的組件，它和界面展示無關(guān)，它負(fù)責(zé)數(shù)據(jù)的獲取和傳遞，之前的 home 組件就是一個(gè)容器組件，再來看看它的 template，你會(huì)發(fā)現(xiàn)它除了根元素以外，不包含其他任何的 html 標(biāo)簽。

與此相反的是，展示組件單單用于展示，自己不獲取任何數(shù)據(jù)，數(shù)據(jù)都通過 props 傳遞，比如 content-header。

const template = `

    

        

            

                

                    
{{ title }}
                    

                    {{ subtitle }}
                
            
        
    
`;

export default Vue.component("contentHeader", {
    template,
    props: {
        boardImg: {
            type: String,
            default: _defaultImg
        },
        title: {
            type: String,
            required: true
        },
        subtitle: {
            type: String
        }
    }
});

這樣明確地區(qū)分容器組件和展示組件會(huì)使得項(xiàng)目結(jié)構(gòu)變得更清晰，追蹤 bug ，以及維護(hù)也變得輕而易舉。

是不是覺得這樣就完了？

No, No, No. 路由系統(tǒng)還沒處理，那么如何將 vue-router 納入到 vuex 的管理中哪？

這里又得感謝尤大大為我們?cè)旌昧艘粋€(gè)小工具 vuex-router-sync。

首先，安裝

npm install vuex-router-sync@next --save

然后，在項(xiàng)目初始化的時(shí)候?qū)?router 同 store 聯(lián)系起來就行，簡單到都不知道說啥好。

不知道說啥，就說說原理，看看源碼吧。

這個(gè)工具的原理也非常好理解，主要是 2 點(diǎn)：

一是，給 vuex 的 store 注冊(cè)一個(gè) router 的 module。

function patchStore (store) {
  // 略...
  var routeModule = {
    mutations: {
      "router/ROUTE_CHANGED": function (state, to) {
        store.state.route = to
      }
    }
  }

  // add module
  if (store.registerModule) {
    store.registerModule("route", routeModule)
  } else if (store.module) {
    store.module("route", routeModule)
  } else {
    store.hotUpdate({
      modules: {
        route: routeModule
      }
    })
  }
}

另一個(gè)，就是使用 vue-router 的 afterEach hooks 來觸發(fā) mutation。

exports.sync = function (store, router) {
  patchStore(store)
  store.router = router

  var commit = store.commit || store.dispatch
  // 略...
  
  // sync store on router navigation
  router.afterEach(function (transition) {
    if (isTimeTraveling) {
      isTimeTraveling = false
      return
    }
    var to = transition.to
    currentPath = to.path
    commit("router/ROUTE_CHANGED", to)
  })
}

項(xiàng)目中使用：

import { sync } from "vuex-router-sync";
import store from "../vuex";
import router from "./router";

sync(store, router);

new Vue({
    store,
    router,
    template: ""
}).$mount("#app");

OK，這樣就大功告成了。

加入了 vuex 后，我的博客終于讓 vue 它們一家子（vue + vuex + vue-router）團(tuán)圓了。

總的來看，vuex 同 vue 一樣使用起來相當(dāng)方便，集成了許多方法，但似乎缺少了 redux 的那份優(yōu)雅，而我喜歡比較優(yōu)雅的...（看在全篇我都在安利 vue 的情面上，尤大大請(qǐng)不要打我~）

PS: 一下把 vuex 有關(guān)的一股腦都過了，可能過得太快，如有不明白的就留言吧。

最后的最后，當(dāng)然是繼續(xù)安利下自己的 Blog，以及 Source Code。