您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)什么情況下應(yīng)該使用Vuex的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
單向數(shù)據(jù)流
以下是一個表示“單向數(shù)據(jù)流”理念的極簡示意:
但是,當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時,單向數(shù)據(jù)流的簡潔性很容易被破壞:
- 多個視圖依賴于同一狀態(tài)。
- 來自不同視圖的行為需要變更同一狀態(tài)。
對于問題一,傳參的方法對于多層嵌套的組件將會非常繁瑣,并且對于兄弟組件間的狀態(tài)傳遞無能為力。
對于問題二,我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱,通常會導(dǎo)致無法維護的代碼。
因此,我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來,以一個全局單例模式管理呢?在這種模式下,我們的組件樹構(gòu)成了一個巨大的“視圖”,不管在樹的哪個位置,任何組件都能獲取狀態(tài)或者觸發(fā)行為!
另外,通過定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則,我們的代碼將會變得更結(jié)構(gòu)化且易維護。
這就是 Vuex 背后的基本思想,借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是,Vuex 是專門為 Vue.js 設(shè)計的狀態(tài)管理庫,以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機制來進行高效的狀態(tài)更新。
什么情況下應(yīng)該使用 Vuex?
雖然 Vuex 可以幫助我們管理共享狀態(tài),但也附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。
如果您不打算開發(fā)大型單頁應(yīng)用,使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應(yīng)用夠簡單,您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是,如果您需要構(gòu)建是一個中大型單頁應(yīng)用,您很可能會考慮如何更好地在組件外部管理狀態(tài),Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是:
Flux 架構(gòu)就像眼鏡:您自會知道什么時候需要它。
如果沒有使用Vuex
假設(shè)有這樣的兩個頁面,數(shù)據(jù)一樣,就是頁面布局不一樣:
代碼
Page1.vue
<template> <div> <h3>我是第一個頁面</h3> <ul class="ul_list"> <li v-for="item in items"> <p class="name">商品:{{item.name}}</p> <p class="price">價格:¥{{item.price}}</p> </li> </ul> </div> </template> <script> export default { data() { return { items: [ { name: '贛州橙子', price: '8.8' }, { name: '新疆哈密瓜', price: '2.0' }, { name: '山東大棗', price: '3.2' }, { name: '陽澄湖大閘蟹', price: '10.0' } ] } }, } </script>
Page2.vue
<template> <div> <h3>我是第二個頁面</h3> <ul class="ul_list page2"> <li v-for="item in items"> <p class="name">商品:{{item.name}}</p> <p class="price">價格:¥{{item.price}}</p> </li> </ul> </div> </template> <script> export default { data() { return { items: [ { name: '贛州橙子', price: '8.8' }, { name: '新疆哈密瓜', price: '2.0' }, { name: '山東大棗', price: '3.2' }, { name: '陽澄湖大閘蟹', price: '10.0' } ] } }, } </script>
現(xiàn)在我們可以看見上面兩個頁面里面的數(shù)據(jù)是一樣的。同一份數(shù)據(jù),我們在兩個頁面里面操作兩次感覺還行,如果有10個,20個 ……頁面需要這樣,那么這就是一個讓人奔潰的事情,而且數(shù)據(jù)的同步刷新也很痛苦。所以就需要Vuex了。簡言之:vuex就是將數(shù)據(jù)共享給多個組件共同使用,同時也將這個數(shù)據(jù)的狀態(tài)進行了共享(一個組件改變這個數(shù)據(jù)的狀態(tài)其它組件也跟著改變)。
Vue官網(wǎng)對Vuex的解釋:
每一個 Vuex 應(yīng)用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對象有以下兩點不同:
Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候,若 store 中的狀態(tài)發(fā)生變化,那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
感謝各位的閱讀!關(guān)于“什么情況下應(yīng)該使用Vuex”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。