先說兩句
官方已經(jīng)有教程了，為什么還要寫這個(gè)教程呢疑务？說實(shí)話沾凄，還真不是我閑著蛋疼，官方的教程真的是太官方了知允，對于剛?cè)腴T Vuex 的童鞋來說撒蟀，想必看官方的教程，很多地方就如同看圣經(jīng)一樣温鸽，比如「歐瑪尼瑪尼牙」保屯，所有的字都認(rèn)識手负，就是不知道說些什么玩意，不信姑尺，你可以戳進(jìn)去看看竟终。
當(dāng)然，對于大神級別一看就懂的切蟋，那就不用說了统捶，肯定是看官方的更權(quán)威。還有柄粹，如果對 Flux喘鸟、Redux、The Elm Architecture 比較熟悉的話驻右，也可以移步官方什黑，因?yàn)楣俜揭舱f了，Vuex 的套路基本上都是從那邊吸取整合后堪夭，過渡而來的愕把，只不過，Vuex 只鐘情于 Vue.js 罷了森爽。
我之所以寫這個(gè)教程恨豁，主要是因?yàn)樽约簞倓傞_始和 Vuex 打交道的時(shí)候，痛過了爬迟、苦過了圣絮、傷過了，所以痛定思痛雕旨，為了能讓自己更好的駕馭 Vuex，也為了不讓新來的童鞋們被 Vuex 調(diào)戲過后無處訴苦捧请，所以方才決定把官方的這些抽象的文字和概念凡涩，用連你身后的鼓勵(lì)師小姐姐都能看懂的語言，分享出來疹蛉，助你在前端的道路上越走越順活箕，順利的找到一份有鼓勵(lì)師陪伴的工作。
再說一句
Vuex 是 Vue.js 的座駕可款，所以育韩，如果還不懂 Vue.js 的話，那還是先把 Vue.js 勾搭上了再帶過來一起坐坐吧闺鲸。當(dāng)然筋讨，既然能夠溜達(dá)到這里，想必跟 Vue.js 起碼也已經(jīng)是朋友了吧摸恍。
有點(diǎn)啰嗦悉罕，不要嫌棄赤屋，寫教程也需要有點(diǎn)前戲，畢竟是第一次壁袄。
安裝
關(guān)于 Vuex 的具體安裝类早，就不在這里說了，這個(gè)官方還是比較清晰的嗜逻，戳此進(jìn)入涩僻。但是需要注意兩點(diǎn)：
- 在一個(gè)模塊化的打包系統(tǒng)中，您必須顯式地通過
Vue.use()來安裝 Vuex栈顷，比如：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 必須調(diào)用此函數(shù)來注入 Vuex
- 當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)逆日，就不用那么麻煩了，直接引用進(jìn)來就好妨蛹，但要注意引用的先后順序屏富，如下：
// 在 Vue 之后引入 vuex 會(huì)進(jìn)行自動(dòng)安裝
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
雖然 script 的方式看起來比較自動(dòng)化，但是接觸得多了蛙卤，你就會(huì)明白模塊化其實(shí)才是我們的最佳姿勢狠半。
揭開 Vuex 的神秘面紗
拿到一個(gè)工具，我們第一時(shí)間需要弄明白的颤难，就是這個(gè)工具到底能夠幫助我們解決什么問題神年。比如錘子，砸得了雞蛋打得了電話行嗤，比如蘋果已日，不但能吃還能玩。那么 Vuex 呢栅屏，如果把 Vue.js 比喻成路人（走路的人）的話飘千，那么 Vuex 就是他的桑塔納，如果他想去隔壁買包煙栈雳，那走過去就行了护奈，開個(gè)車過去反而是一種負(fù)擔(dān)，但是如果他想去幾十公里的學(xué)校采花哥纫，那桑塔納就得派上用場了霉旗，不然等他走過去，可能花兒都謝了蛀骇。
當(dāng)然厌秒，類比只是為了告訴我們 Vuex 的價(jià)值所在，那么在具體在實(shí)際的應(yīng)用中擅憔，它能干什么鸵闪？什么時(shí)候才需要翻它的牌呢？
我們先來看一段官方代碼：
new Vue({
// state 數(shù)據(jù)源
data () {
return {
count: 0
}
},
// view 視圖
template: `
<div>{{ count }}</div>
`,
// actions 事件
methods: {
increment () {
this.count++
}
}
})
這是一個(gè)很簡單的增長型計(jì)數(shù)功能頁面暑诸，和 Vue.js 有一腿的岛马，應(yīng)該秒懂棉姐。通過事件 increment，實(shí)現(xiàn) count 增長啦逆，然后渲染到界面上去伞矩。
這種方式其實(shí)就跟走路買煙一樣，屬于短途效應(yīng)夏志，官方稱作為「單向數(shù)據(jù)流」乃坤，很好理解。
但是沟蔑，情況變了湿诊，現(xiàn)在有兩個(gè)頁面 A 和 B，還有以下兩個(gè)要求：
- 要求它們都能對
count進(jìn)行操控瘦材。 - 要求 A 修改了
count后厅须，B 要第一時(shí)間知道，B 修改后食棕，A 也要第一時(shí)間知道朗和。
怎么辦？稍微有點(diǎn)開發(fā)經(jīng)驗(yàn)的簿晓，就能夠很容易的想到眶拉，把數(shù)據(jù)源 count 剝離開來，用一個(gè)全局變量或者全局單例的模式進(jìn)行管理憔儿，這樣不就在任何頁面都可以很容易的取到這個(gè)狀態(tài)了忆植。
是啊，這尼瑪就是 Vuex 背后的思想啊谒臼，它干的就是這個(gè)事情朝刊。是不是有一種被 Vuex 這個(gè)高大上的名號所坑害的感覺，不就是全局模型嗎蜈缤，不用它也同樣可能搞定嘛坞古。
是的，也可以搞定劫樟，就像沒有桑塔納，你也可以去學(xué)兄茫看花一樣叠艳，只是經(jīng)歷的過程不一樣了。
Vuex 的目的是為了管理共享狀態(tài)易阳，為了達(dá)到這個(gè)目的附较，它制定了一系列的規(guī)則，比如修改數(shù)據(jù)源 state潦俺、觸發(fā) actions 等等拒课，都需要遵循它的規(guī)則徐勃，以此來達(dá)到讓項(xiàng)目結(jié)構(gòu)更加清晰且易于維護(hù)的目的。
那么我們再來看看官方的描述：
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式早像。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)僻肖，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
有沒有瞬間清晰多了卢鹦。
什么時(shí)候翻 Vuex 的牌
其實(shí)了解了 Vuex 要干的活以后臀脏，什么時(shí)候翻牌，那就容易選擇得多了冀自。就像前面的類比一樣揉稚，去隔壁買包煙，你還開個(gè)桑塔納熬粗，找停車位的時(shí)間搀玖，煙都抽完了。
所以驻呐，我們要根據(jù)項(xiàng)目的需要灌诅，來衡量短期和長期的效益，如果不打算開發(fā)大型的單頁應(yīng)用暴氏，那 Vuex 可能還是你的一個(gè)負(fù)擔(dān)延塑。對于一些不大不小的項(xiàng)目，自己又懶得走答渔，開車又覺得麻煩关带，那你騎個(gè)共享單車過去也行嘛。
這里的共享單車指代的是官方中的一個(gè)簡單的 store 模式沼撕，其實(shí)就是一個(gè)單純的全局對象宋雏。
關(guān)于全局對象和 Vuex 之間的區(qū)別，官方寫得還是比較通俗易懂的：
Vuex 和單純的全局對象有以下兩點(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)用馆纳。
簡單示例
// 如果在模塊化構(gòu)建系統(tǒng)中，請確保在開頭調(diào)用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）汹桦。store 基本上就是一個(gè)容器鲁驶，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
注意：如果 mutations 不知道是什么舞骆，沒關(guān)系钥弯，后面會(huì)專門講解到径荔，可以單純的理解為只能用它里面的方法來修改 state 中的數(shù)據(jù)。
store.commit('increment') // 調(diào)用 mutations 中的方法
console.log(store.state.count) // -> 1
為什么要這樣設(shè)計(jì)的脆霎，官方也給出了具體的原因：
我們通過提交 mutation 的方式总处，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化绪穆。這個(gè)簡單的約定能夠讓你的意圖更加明顯辨泳，這樣你在閱讀代碼的時(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)簡單到僅需要在計(jì)算屬性中返回即可郊酒。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation遇绞。
如果最后一句話沒看懂，沒關(guān)系燎窘，下一章馬上就會(huì)講到摹闽。
PS
來點(diǎn)正經(jīng)的，到這里褐健，第一篇其實(shí)就已經(jīng)寫完了付鹿，當(dāng)然，這里的內(nèi)容都是我看了官方的教程后蚜迅，自己的一個(gè)理解舵匾，如果有理解不到位的地方，歡迎拍磚谁不。
