「 介紹用途?」

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

因為還有很多人，在手寫一些基本功能的狀態(tài)，但其實這些組件和功能，社區(qū)已經(jīng)有提供了，比如緩存管理、多個布局的?vue加載效果，本地緩存狀態(tài)持久化等(其實就是瀏覽器的 ?local storage 封裝)。

Vuex 是什么？

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

vuex解決了組件之間共享同一狀態(tài)的麻煩問題。當我們的應(yīng)用遇到多個組件共享狀態(tài)時，會需要：

1. 多個組件依賴于同一狀態(tài)。傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。這需要你去學習了解下，vue中多個組件之間的通訊是怎么玩的。

2. 來自不同組件的行為需要變更同一狀態(tài)。我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份共用狀態(tài)，比如最常見的用戶登陸狀態(tài)，購物車數(shù)據(jù)等對吧。

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

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

現(xiàn)在有了vuex，就組件就都和store通訊，問題就自然解決了，你不用像個保姆一樣，來回去更新各個組件的狀態(tài)。

這就是為什么官網(wǎng)再次會提到Vuex構(gòu)建大型應(yīng)用的價值。如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex。

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

Vuex 插件推薦

部分參考國外翻譯，正文開始

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

在一下插件中，將向你展示5個特性，你可以通過 Vuex 插件輕松地添加到下一個項目中。

• 狀態(tài)持久化

• 同步標簽頁、窗口

• 語言本地化

• 管理多個加載狀態(tài)

• 緩存操作
  
  

---

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

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

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

2. 同步標簽頁、窗口

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

3. 語言本地化

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

一個很酷的功能是你可以存儲帶有標記的字符串，比如"Hello {name}, this is your Vue.js app."。所有的翻譯版本都會在標記的地方使用相同的字符串。

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

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

5. 緩存操作

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

6.大殺器 vue-devtools

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

我從不公布的一些秘密插件，請收藏別分享

當我們添加完vue-devtools擴展程序之后，我們在調(diào)試vue應(yīng)用的時候，chrome開發(fā)者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。

vue-devtools使用起來還是比較簡單的，上手非常的容易，主要是幾個按鈕狀態(tài)，相信vue全家桶的同學都用過或者了解過，具體怎么用，自己安裝完了，一看就會嗯，不要懶！

覺得對你有幫助，
就盡快轉(zhuǎn)發(fā)、傳播吧！

長按掃碼關(guān)注我

前端你別鬧~妹子最多的技術(shù)號

熱門閱讀：

我的一個朋友加班猝死了，我很恐慌?|??滴滴不倒閉，世界和中國的奇跡！?|??程序員必須盡早作打算?|?高房價正在毀掉80、90后，甚至00后的家庭和夢想??|??我整理最有效、最全的Vue 2.0 學習路線，各個階段適

總結(jié)

以上是生活随笔為你收集整理的推荐几个Vue开发必备插件，要收藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。