這篇文章主要介紹vuex的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司服務項目包括恩陽網(wǎng)站建設、恩陽網(wǎng)站制作、恩陽網(wǎng)頁制作以及恩陽網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，恩陽網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到恩陽省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

使用vuex的時候是如果您需要構(gòu)建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex將會成為自然而然的選擇。

狀態(tài)管理

隨著 JavaScript 單頁應用開發(fā)日趨復雜，JavaScript 需要管理比任何時候都要多的 state （狀態(tài)）。 這些 state 可能包括服務器響應、緩存數(shù)據(jù)、本地生成尚未持久化到服務器的數(shù)據(jù)，也包括 UI 狀態(tài)，如激活的路由，被選中的標簽，是否顯示加載動效或者分頁器等等。

管理不斷變化的 state 非常困難。如果一個 model 的變化會引起另一個 model 變化，那么當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發(fā)生了什么。state 在什么時候，由于什么原因，如何變化已然不受控制。 當系統(tǒng)變得錯綜復雜的時候，想重現(xiàn)問題或者添加新功能就會變得舉步維艱。

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

在應用中，組件之間的通信其實是歸根于應用的狀態(tài)管理；而應用的狀態(tài)是來自多方面的，如何對狀態(tài)進行管理，提高代碼的可維護性，提升開發(fā)效率。Vue 的核心庫只關(guān)注視圖層，單文件組件，其模板、邏輯和樣式是內(nèi)部耦合的，側(cè)重數(shù)據(jù)和視圖的同步；Vue 本身并沒有對數(shù)據(jù)狀態(tài)的管理進行處理，但其提供了另外一個解決方案 Vuex，一個集中式狀態(tài)管理的庫；也就是說，你可能不需要 Vuex，它只是對你應用狀態(tài)進行管理的一個庫。

Vuex 狀態(tài)自管理應用包含以下幾個部分：

• state，驅(qū)動應用的數(shù)據(jù)源；

• view，以聲明方式將 state 映射到視圖；

• actions，響應在 view 上的用戶輸入導致的狀態(tài)變化。

如上圖，Vuex為Vue Components建立起了一個完整的生態(tài)圈，包括開發(fā)中的API調(diào)用一環(huán)。圍繞這個生態(tài)圈，簡要介紹一下各模塊在核心流程中的主要功能：

• Vue Components：Vue組件。HTML頁面上，負責接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對應action進行回應。

• dispatch：操作行為觸發(fā)方法，是能執(zhí)行action的方法。

• actions：操作行為處理模塊。負責處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個同名方法，按照注冊的順序依次觸發(fā)。向后臺API請求的操作就在這個模塊中進行，包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈式觸發(fā)。

• commit：狀態(tài)改變提交操作方法。對mutation進行提交，是能執(zhí)行mutation的方法。

• mutations：狀態(tài)改變操作方法。是Vuex修改state的推薦方法，其他修改方式在嚴格模式下將會報錯。該方法只能進行同步操作，且方法名只能全局。操作之中會有一些hook暴露出來，以進行state的監(jiān)控等。

• state：頁面狀態(tài)管理容器對象。集中存儲Vue components中data對象的零散數(shù)據(jù)，全局，以進行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進行讀取，利用Vue的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。

• getters：state對象讀取方法。圖中沒有單獨列出該模塊，應該被包含在了render中，Vue Components通過該方法讀取全局state對象。

集中式狀態(tài)管理的好處

相對于分治(碎片化)的狀態(tài)管理，多個狀態(tài)分散的跨越在不同組件交互在各個角落，每個 View 會有相對應的 Model 維護狀態(tài)；而集中式管理模式則用于將分散于組件的狀進行集中化管理，提供一個全局的 store 存儲管理應用的狀態(tài)。集中式的狀態(tài)管理可以讓整體的狀態(tài)變化更加明晰，尤其是配合各自的 devtools。

什么情況下我應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。

如果您不打算開發(fā)大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構(gòu)建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

以上是“vuex的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：vuex的使用方法-創(chuàng)新互聯(lián)
文章出自：http://m.newbst.com/article6/dcsjog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、Google、搜索引擎優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)