本來(lái)這次是需要進(jìn)階vue-router的，但考慮這是基礎(chǔ)教程，說(shuō)的太難很容易大家糊里糊涂的屎媳，在后期的實(shí)例案例才給大家進(jìn)階吧夺溢，這節(jié)課學(xué)習(xí)一下vuex，vuex是中央狀態(tài)管理器烛谊，它存儲(chǔ)這個(gè)整個(gè)項(xiàng)目的公共狀態(tài)风响，它的出現(xiàn)極大的簡(jiǎn)化了數(shù)據(jù)的跨組件傳輸，我們之前學(xué)過(guò)組件的父子之間傳輸丹禀，如果是兄弟組件状勤，如果是多層級(jí)的組件嵌套，那會(huì)更麻煩双泪，所以就出現(xiàn)了vuex這么一個(gè)東東持搜。舉個(gè)栗子，我們都知道面包屑導(dǎo)航焙矛，一般這個(gè)在vue中是通過(guò)加載不同組件來(lái)進(jìn)行頁(yè)面切換葫盼，面包屑部分就可以用vue來(lái)實(shí)現(xiàn)嗎，根據(jù)加載的組件村斟，來(lái)顯示不同的導(dǎo)航贫导。好了，來(lái)個(gè)實(shí)例看看吧蟆盹，學(xué)了不如會(huì)用孩灯，使用才是實(shí)現(xiàn)價(jià)值的唯一目的，先進(jìn)行安裝npm install vuex --save逾滥，就可以安裝好vuex了：
——》目錄結(jié)構(gòu)峰档，我新加了個(gè)文件夾，store文件夾匣距，里面有個(gè)index文件面哥，我們就在這個(gè)文件里面編寫vuex的代碼：
——》我們看看index文件里面的代碼，先引入vue和vuex毅待，然后讓vue使用vuex尚卫，定義出一個(gè)常量，new出vuex的store屬性尸红，里面有三個(gè)屬性吱涉，其實(shí)vuex一共有五個(gè)屬性，這里只介紹常用的三個(gè)就夠了：
第一個(gè)是state外里，這個(gè)和vue的data是一個(gè)意思咯怎爵，就是定義參數(shù)，需要什么參數(shù)盅蝗，直接定義出來(lái)就可以鳖链，我們這里定義了一個(gè)count，值為5；
第二個(gè)是getters芙委，這個(gè)vuex的計(jì)算屬性逞敷，就是根據(jù)vuex的值，延伸出來(lái)的值灌侣，這里我們讓newCount的值是count的三倍推捐；
第三個(gè)是mutations，這個(gè)就是vuex的方法侧啼，vuex的值是不能隨便修改的牛柒，只能通過(guò)方法來(lái)進(jìn)行修改，看到這里痊乾，開(kāi)發(fā)過(guò)小程序的朋友一定很容易理解皮壁，小程序的值也是需要通多固定的API來(lái)進(jìn)行修改的。這里定義了一個(gè)increment方法哪审，這個(gè)方法的目的是為了讓count每次都加一闪彼，好了，我們?cè)倏纯慈绾螔燧d到vue里面去协饲；
——》看一下main文件，先引入store文件缴川，然后放到vue實(shí)例里面就搞定了茉稠，超級(jí)簡(jiǎn)單的，如何使用呢把夸？我們看看我們的helloworld文件代碼而线；
這個(gè)文件代碼比較多，我一個(gè)個(gè)解釋恋日，總的來(lái)說(shuō)膀篮，我有三個(gè)目的，第一就是顯示vuex的狀態(tài)值岂膳，第二就是使用狀態(tài)值誓竿，第三就是看看不同組件之間的狀態(tài)值是不是同步；我在計(jì)算屬性里面return出了vuex的count谈截，這里想拿到vuex的值和調(diào)用vuex的內(nèi)容必須是通過(guò)this.store.state.count罷了毙死，這也是方便自己使用的，第二個(gè)我定義了一個(gè)方法喻鳄，在點(diǎn)擊方法的時(shí)候觸發(fā)了vuex的方法扼倘，觸發(fā)vuex方法的代碼是this.$store.commit('increment');這樣就能夠改變vuex的值了，第三我引入了一個(gè)子組件child除呵，回頭我們?cè)诳纯醋咏M件的代碼是怎么樣的再菊，最后一個(gè)是我們定義了當(dāng)count的值大于或者等于9時(shí)候爪喘，就顯示出我們要顯示的內(nèi)容；
——》在子組件里面我們將vuex的count和newCount的值都引入了袄简，展示出來(lái)腥放；
初始化時(shí)候，我們的值是5绿语，newCount的值是15秃症，是count的三倍，我們點(diǎn)擊按鈕吕粹，count的值變?yōu)?的時(shí)候：
現(xiàn)在我們看看效果：
所有值都是同步變化的种柑，然后我們需要根據(jù)count大于等于9時(shí)候顯示的值，現(xiàn)在也顯示出來(lái)了匹耕。
好了聚请，vuex就是這么簡(jiǎn)單的使用，看明白了有時(shí)候還是不夠的稳其，還是需要多敲驶赏，只有使用時(shí)檢驗(yàn)價(jià)值的唯一標(biāo)準(zhǔn)，希望大家都學(xué)好技術(shù)既鞠，用好技術(shù)煤傍，今天的教程就到這里，喜歡我的朋友也可以關(guān)注我嘱蛋，期待與你一起進(jìn)步蚯姆。
