先說(shuō)兩句

官方已經(jīng)有教程了倡勇，為什么還要寫(xiě)這個(gè)教程呢？說(shuō)實(shí)話嘉涌，還真不是我閑著蛋疼妻熊，官方的教程真的是太官方了，對(duì)于剛?cè)腴T(mén) Vuex 的童鞋來(lái)說(shuō)仑最，想必看官方的教程扔役，很多地方就如同看圣經(jīng)一樣，比如「歐瑪尼瑪尼牙」警医，所有的字都認(rèn)識(shí)亿胸，就是不知道說(shuō)些什么玩意，不信预皇，你可以戳進(jìn)去看看侈玄。

當(dāng)然，對(duì)于大神級(jí)別一看就懂的吟温，那就不用說(shuō)了序仙，肯定是看官方的更權(quán)威。還有鲁豪，如果對(duì)Flux潘悼、Redux律秃、The Elm Architecture比較熟悉的話，也可以移步官方治唤，因?yàn)楣俜揭舱f(shuō)了棒动，Vuex 的套路基本上都是從那邊吸取整合后，過(guò)渡而來(lái)的宾添，只不過(guò)船惨，Vuex 只鐘情于Vue.js罷了。

我之所以寫(xiě)這個(gè)教程缕陕，主要是因?yàn)樽约簞倓傞_(kāi)始和 Vuex 打交道的時(shí)候掷漱，痛過(guò)了、苦過(guò)了榄檬、傷過(guò)了卜范，所以痛定思痛，為了能讓自己更好的駕馭 Vuex鹿榜，也為了不讓新來(lái)的童鞋們被 Vuex 調(diào)戲過(guò)后無(wú)處訴苦海雪，所以方才決定把官方的這些抽象的文字和概念，用連你身后的鼓勵(lì)師小姐姐都能看懂的語(yǔ)言舱殿，分享出來(lái)奥裸，助你在前端的道路上越走越順，順利的找到一份有鼓勵(lì)師陪伴的工作沪袭。

再說(shuō)一句

Vuex 是?Vue.js?的座駕湾宙，所以，如果還不懂?Vue.js?的話冈绊，那還是先把?Vue.js?勾搭上了再帶過(guò)來(lái)一起坐坐吧侠鳄。當(dāng)然，既然能夠溜達(dá)到這里死宣，想必跟?Vue.js?起碼也已經(jīng)是朋友了吧伟恶。

有點(diǎn)啰嗦，不要嫌棄毅该，寫(xiě)教程也需要有點(diǎn)前戲博秫，畢竟是第一次。

安裝

關(guān)于 Vuex 的具體安裝眶掌，就不在這里說(shuō)了挡育，這個(gè)官方還是比較清晰的，戳此進(jìn)入朴爬。但是需要注意兩點(diǎn)：

:在一個(gè)模塊化的打包系統(tǒng)中即寒，您必須顯式地通過(guò)?Vue.use()?來(lái)安裝 Vuex，比如：

????importVuefrom'vue'

????importVuexfrom'vuex'

????Vue.use(Vuex) // 必須調(diào)用此函數(shù)來(lái)注入 Vuex

:當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)，就不用那么麻煩了蒿叠，直接引用進(jìn)來(lái)就好，但要注意引用的先后順序蚣常，如下：

// 在 Vue 之后引入 vuex 會(huì)進(jìn)行自動(dòng)安裝

<script src="/path/to/vue.js"></script>

<script src="/path/to/vuex.js"></script>

雖然 script 的方式看起來(lái)比較自動(dòng)化市咽，但是接觸得多了，你就會(huì)明白模塊化其實(shí)才是我們的最佳姿勢(shì)抵蚊。

揭開(kāi) Vuex 的神秘面紗

拿到一個(gè)工具施绎，我們第一時(shí)間需要弄明白的，就是這個(gè)工具到底能夠幫助我們解決什么問(wèn)題贞绳。比如錘子谷醉，砸得了雞蛋打得了電話，比如蘋(píng)果冈闭，不但能吃還能玩俱尼。那么 Vuex 呢，如果把 Vue.js 比喻成路人（走路的人）的話萎攒，那么 Vuex 就是他的桑塔納遇八，如果他想去隔壁買(mǎi)包煙，那走過(guò)去就行了耍休，開(kāi)個(gè)車(chē)過(guò)去反而是一種負(fù)擔(dān)刃永，但是如果他想去幾十公里的學(xué)校采花，那桑塔納就得派上用場(chǎng)了羊精，不然等他走過(guò)去斯够，可能花兒都謝了。

當(dāng)然喧锦，類(lèi)比只是為了告訴我們 Vuex 的價(jià)值所在读规，那么在具體在實(shí)際的應(yīng)用中，它能干什么燃少？什么時(shí)候才需要翻它的牌呢掖桦？

我們先來(lái)看一段官方代碼：

這是一個(gè)很簡(jiǎn)單的增長(zhǎng)型計(jì)數(shù)功能頁(yè)面，和?Vue.js?有一腿的供汛，應(yīng)該秒懂枪汪。通過(guò)事件?increment，實(shí)現(xiàn)?count?增長(zhǎng)怔昨，然后渲染到界面上去雀久。

這種方式其實(shí)就跟走路買(mǎi)煙一樣，屬于短途效應(yīng)趁舀，官方稱(chēng)作為「單向數(shù)據(jù)流」赖捌，很好理解。

單向數(shù)據(jù)流

但是，情況變了越庇，現(xiàn)在有兩個(gè)頁(yè)面 A 和 B罩锐，還有以下兩個(gè)要求：

要求它們都能對(duì)?count?進(jìn)行操控。

要求 A 修改了?count?后卤唉，B 要第一時(shí)間知道涩惑，B 修改后，A 也要第一時(shí)間知道桑驱。

怎么辦竭恬？稍微有點(diǎn)開(kāi)發(fā)經(jīng)驗(yàn)的，就能夠很容易的想到熬的，把數(shù)據(jù)源?count?剝離開(kāi)來(lái)痊硕，用一個(gè)全局變量或者全局單例的模式進(jìn)行管理，這樣不就在任何頁(yè)面都可以很容易的取到這個(gè)狀態(tài)了押框。

是啊岔绸，這尼瑪就是 Vuex 背后的思想啊，它干的就是這個(gè)事情橡伞。是不是有一種被 Vuex 這個(gè)高大上的名號(hào)所坑害的感覺(jué)亭螟，不就是全局模型嗎，不用它也同樣可能搞定嘛骑歹。

是的预烙，也可以搞定，就像沒(méi)有桑塔納道媚，你也可以去學(xué)斜獾В看花一樣，只是經(jīng)歷的過(guò)程不一樣了最域。

Vuex 的目的是為了管理共享狀態(tài)谴分，為了達(dá)到這個(gè)目的，它制定了一系列的規(guī)則镀脂，比如修改數(shù)據(jù)源 state牺蹄、觸發(fā) actions 等等，都需要遵循它的規(guī)則薄翅，以此來(lái)達(dá)到讓項(xiàng)目結(jié)構(gòu)更加清晰且易于維護(hù)的目的沙兰。

那么我們?cè)賮?lái)看看官方的描述：

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)翘魄，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化鼎天。

有沒(méi)有瞬間清晰多了。

什么時(shí)候翻 Vuex 的牌

其實(shí)了解了 Vuex 要干的活以后暑竟，什么時(shí)候翻牌斋射，那就容易選擇得多了。就像前面的類(lèi)比一樣，去隔壁買(mǎi)包煙罗岖，你還開(kāi)個(gè)桑塔納涧至，找停車(chē)位的時(shí)間，煙都抽完了桑包。

所以南蓬，我們要根據(jù)項(xiàng)目的需要，來(lái)衡量短期和長(zhǎng)期的效益捡多，如果不打算開(kāi)發(fā)大型的單頁(yè)應(yīng)用蓖康，那 Vuex 可能還是你的一個(gè)負(fù)擔(dān)铐炫。對(duì)于一些不大不小的項(xiàng)目垒手，自己又懶得走，開(kāi)車(chē)又覺(jué)得麻煩倒信，那你騎個(gè)共享單車(chē)過(guò)去也行嘛科贬。

這里的共享單車(chē)指代的是官方中的一個(gè)簡(jiǎn)單的?store 模式，其實(shí)就是一個(gè)單純的全局對(duì)象鳖悠。

關(guān)于全局對(duì)象和 Vuex 之間的區(qū)別榜掌，官方寫(xiě)得還是比較通俗易懂的：

Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候乘综，若 store 中的狀態(tài)發(fā)生變化憎账，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

你不能直接改變 store 中的狀態(tài)卡辰。改變 store 中狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation胞皱。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用九妈。

簡(jiǎn)單示例

// 如果在模塊化構(gòu)建系統(tǒng)中反砌，請(qǐng)確保在開(kāi)頭調(diào)用了

Vue.use(Vuex)conststore =newVuex.Store({?

????state: {

????? ? count:0

????},?

????mutations: {? ?

????????increment (state) {? ? ?

????????state.count++? ?

????}?

? }

})

每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）。store 基本上就是一個(gè)容器萌朱，它包含著你的應(yīng)用中大部分的狀態(tài) (state)宴树。

注意：如果 mutations 不知道是什么，沒(méi)關(guān)系晶疼，后面會(huì)專(zhuān)門(mén)講解到酒贬，可以單純的理解為只能用它里面的方法來(lái)修改 state 中的數(shù)據(jù)。

為什么要這樣設(shè)計(jì)的翠霍，官方也給出了具體的原因：

我們通過(guò)提交 mutation 的方式同衣，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化壶运。這個(gè)簡(jiǎn)單的約定能夠讓你的意圖更加明顯耐齐，這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。此外，這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變埠况，保存狀態(tài)快照的調(diào)試工具耸携。有了它，我們甚至可以實(shí)現(xiàn)如時(shí)間穿梭般的調(diào)試體驗(yàn)辕翰。

由于 store 中的狀態(tài)是響應(yīng)式的夺衍，在組件中調(diào)用 store 中的狀態(tài)簡(jiǎn)單到僅需要在計(jì)算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation喜命。

如果最后一句話沒(méi)看懂沟沙，沒(méi)關(guān)系，啃一下官網(wǎng)壁榕，哈哈矛紫。