「 介紹用途?」

大家知道昂羡，Vue2.x之后，Vuex狀態(tài)管理是必須要掌握的一個(gè)技術(shù)點(diǎn)肝集，今天北媽先介紹下Vuex是什么，然后在介紹幾個(gè)封裝好的操作本地緩存蛛壳、狀態(tài)的幾個(gè)組件杏瞻，需要的童鞋趕緊拿走，可能有很多人已經(jīng)再用了炕吸，并不是什么高大上的東西伐憾，只是讓更多的人能加快開(kāi)發(fā)的效率勉痴。

因?yàn)檫€有很多人赫模，在手寫(xiě)一些基本功能的狀態(tài)，但其實(shí)這些組件和功能蒸矛，社區(qū)已經(jīng)有提供了瀑罗，比如緩存管理、多個(gè)布局的?vue加載效果雏掠，本地緩存狀態(tài)持久化等(其實(shí)就是瀏覽器的 ?local storage 封裝)斩祭。

Vuex 是什么？

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ā)生變化

vuex解決了組件之間共享同一狀態(tài)的麻煩問(wèn)題。當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)绑青，會(huì)需要：

1. 多個(gè)組件依賴(lài)于同一狀態(tài)诬像。傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無(wú)能為力闸婴。這需要你去學(xué)習(xí)了解下坏挠，vue中多個(gè)組件之間的通訊是怎么玩的。

2. 來(lái)自不同組件的行為需要變更同一狀態(tài)邪乍。我們經(jīng)常會(huì)采用父子組件直接引用或者通過(guò)事件來(lái)變更和同步狀態(tài)的多份共用狀態(tài)降狠，比如最常見(jiàn)的用戶(hù)登陸狀態(tài)，購(gòu)物車(chē)數(shù)據(jù)等對(duì)吧庇楞。

以上的這些場(chǎng)景的應(yīng)用都是非常脆弱和繁瑣的榜配，也就是要人肉控制，之前是寫(xiě)到本地緩存或者全局變量吕晌，這樣通常會(huì)導(dǎo)致無(wú)法維護(hù)的代碼蛋褥。

看看來(lái)自Vue官網(wǎng)的一句話(huà)：Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)聂使。

現(xiàn)在有了vuex壁拉，就組件就都和store通訊谬俄，問(wèn)題就自然解決了，你不用像個(gè)保姆一樣弃理，來(lái)回去更新各個(gè)組件的狀態(tài)溃论。

這就是為什么官網(wǎng)再次會(huì)提到Vuex構(gòu)建大型應(yīng)用的價(jià)值。如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用痘昌，使用 Vuex 可能是繁瑣冗余的钥勋。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex辆苔。

以上簡(jiǎn)短介紹下 vuex的重要性和概念算灸，具體怎樣，這篇文章不是干這個(gè)用的驻啤，去看官網(wǎng)或者教程菲驴，我后面會(huì)出一系列通俗易懂的vue教程系列，在討論此事骑冗。

Vuex 插件推薦

部分參考國(guó)外翻譯赊瞬，正文開(kāi)始

使用 Vuex 來(lái)管理 Vue 的狀態(tài)，有很多好的理由贼涩。其中之一就是巧涧，通過(guò) Vuex 插件可以非常容易的擴(kuò)展一些很酷的功能。Vuex 社區(qū)中的開(kāi)發(fā)人員已經(jīng)創(chuàng)建了大量的免費(fèi)插件供你使用遥倦，有許多你能想象的功能谤绳，還有一些你可能沒(méi)有想到的功能。

在一下插件中袒哥，將向你展示5個(gè)特性缩筛，你可以通過(guò) Vuex 插件輕松地添加到下一個(gè)項(xiàng)目中。

1统诺、狀態(tài)持久化

2歪脏、同步標(biāo)簽頁(yè)、窗口

3粮呢、語(yǔ)言本地化

4婿失、管理多個(gè)加載狀態(tài)

5、緩存操作

1. 狀態(tài)持久化

vuex-persistedstate?使用瀏覽器的本地存儲(chǔ)（ local storage ）對(duì)狀態(tài)（ state ）進(jìn)行持久化啄寡。這意味著刷新頁(yè)面或關(guān)閉標(biāo)簽頁(yè)都不會(huì)刪除你的數(shù)據(jù)豪硅。

一個(gè)很好的例子就是購(gòu)物車(chē)：如果用戶(hù)不小心關(guān)閉了一個(gè)標(biāo)簽，他們可以重新打開(kāi)并回到之前頁(yè)面的狀態(tài)挺物。

2. 同步標(biāo)簽頁(yè)懒浮、窗口

vuex-shared-mutations?可在不同的標(biāo)簽頁(yè)之間同步狀態(tài)。它通過(guò)?mutation?將狀態(tài)儲(chǔ)存到本地存儲(chǔ)（local storage）來(lái)實(shí)現(xiàn)。選項(xiàng)卡砚著、窗口中的內(nèi)容更新時(shí)觸發(fā)儲(chǔ)存事件次伶，重新調(diào)用?mutation?，從而保持狀態(tài)同步稽穆。

3. 語(yǔ)言本地化

vuex-i18n?允許你輕松地用多種語(yǔ)言存儲(chǔ)內(nèi)容冠王。讓你的應(yīng)用切換語(yǔ)言時(shí)更容易。

一個(gè)很酷的功能是你可以存儲(chǔ)帶有標(biāo)記的字符串舌镶，比如"Hello {name}, this is your Vue.js app."柱彻。所有的翻譯版本都會(huì)在標(biāo)記的地方使用相同的字符串。

4. 管理多個(gè)加載狀態(tài)

vuex-loading?有助于你管理應(yīng)用中的多個(gè)加載狀態(tài)餐胀。這個(gè)插件適用于狀態(tài)變化頻繁且復(fù)雜的實(shí)時(shí)應(yīng)用程序哟楷。

5. 緩存操作

vuex-cache?可以緩存 Vuex 的?action。例如否灾，如果你從服務(wù)器檢索數(shù)據(jù)卖擅，這個(gè)插件將在第一次調(diào)用該?action?時(shí)緩存結(jié)果，然后在之后的dispatch中坟冲，直接返回緩存的值磨镶。必要時(shí)清除緩存也很簡(jiǎn)單溃蔫。

6.大殺器 vue-devtools

安裝地址：
https://chrome.google.com/webstore/search/vue-devtools
?~ 不會(huì)翻qiang的看我這篇文章推薦

我從不公布的一些秘密插件健提，請(qǐng)收藏別分享

當(dāng)我們添加完vue-devtools擴(kuò)展程序之后，我們?cè)谡{(diào)試vue應(yīng)用的時(shí)候伟叛，chrome開(kāi)發(fā)者工具中會(huì)看一個(gè)vue的一欄私痹，點(diǎn)擊之后就可以看見(jiàn)當(dāng)前頁(yè)面vue對(duì)象的一些信息。

vue-devtools使用起來(lái)還是比較簡(jiǎn)單的统刮，上手非常的容易紊遵，主要是幾個(gè)按鈕狀態(tài)，相信vue全家桶的同學(xué)都用過(guò)或者了解過(guò)侥蒙，具體怎么用暗膜，自己安裝完了，一看就會(huì)嗯鞭衩，不要懶学搜！

感興趣的小伙伴，可以關(guān)注公眾號(hào)【grain先森】论衍，回復(fù)關(guān)鍵詞 “vue”瑞佩，獲取更多資料，更多關(guān)鍵詞玩法期待你的探索~