詳解Vuex的屬性和作用
Vuex是什么?
VueX是一個專門為 Vue.js 應用設計的狀態(tài)管理架構,統(tǒng)一管理和維護各個vue組件的可變化狀態(tài)(你可以理解成 vue 組件里的某些 data )。
vuex 可以理解為一種開發(fā)模式或框架。比如 PHP 有 thinkphp ,java 有 spring 等。
通過狀態(tài)(數(shù)據(jù)源) 集中管理驅動組件的變化(好比 spring 的 IOC 容器對 bean 進行集中管理)。
Vuex有五個核心概念,state, getters, mutations, actions, modules。
應用級的狀態(tài)集中放在 store 中; 改變狀態(tài)的方式是提交 mutations ,這是個同步的事物; 異步邏輯 應該封裝在 action 中。
Cuex借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是,Vuex 是專門為 Vue.js 設計的狀態(tài)管理庫,以利用 Vue.js 的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。
狀態(tài)管理: 簡單理解就是統(tǒng)一管理和維護各個vue組件的可變化狀態(tài)(你可以理解成vue組件里的某些data)
Vuex的5個屬性
state:單一狀態(tài)樹,用一個對象就包含了全部的應用層級狀態(tài)。
getters:就像計算屬性一樣,getter 的返回值會根據(jù)它的依賴被緩存起來,且只有當它的依賴值發(fā)生了改變才會被重新計算。
mutations:每個mutation都有一個字符串的事件類型 (type) 和一個回調(diào)函數(shù) (handler)。
action:action 類似于mutation,不同在于:action 提交的是mutation,而不是直接變更狀態(tài);action可以包含任意異步操作。
modules:模塊化vuex,每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。
vuex 的 State 特性是?
1 、Vuex 就是一個倉庫,倉庫里面放了很多對象。其中 state 就是數(shù)據(jù)源存放地,對應于與一般 Vue 對象 里面的 data。
2 、state 里面存放的數(shù)據(jù)是響應式的,Vue 組件從 store 中讀取數(shù)據(jù),若是 store 中的數(shù)據(jù)發(fā)生改變,依賴 這個數(shù)據(jù)的組件也會發(fā)生更新。
3 、它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中。
vuex 的 Getter 特性是?
1 、getters 可以對 State 進行計算操作,它就是 Store 的計算屬性
2 、 雖然在組件內(nèi)也可以做計算屬性,但是 getters 可以在多組件之間復用
3 、 如果一個狀態(tài)只在一個組件內(nèi)使用,是可以不用 getters
vuex 的 mauation 特性是?
1、mutation是一個對象包含多個直接更新state的方法(回調(diào)函數(shù))
2、只能包含同步的代碼, 不能寫異步代碼
vuex 的 action 特性是?
1 、action 類似于 mutation ,不同在于:
2 、action 提交的是 mutation ,而不是直接變更狀態(tài)。
3 、action 可以包含任意異步操作
什么情況下應該使用 Vuex?
雖然 Vuex 可以幫助我們管理共享狀態(tài),但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果不打算開發(fā)大型單頁應用,使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單,您最好不要使用 Vuex。一個簡單的global event bus就足夠您所需了。但是,如果您需要構建是一個中大型單頁應用,您很可能會考慮如何更好地在組件外部管理狀態(tài),Vuex 將會成為自然而然的選擇。
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結合實例形式分析了vue.js組件間通信相關操作技巧,需要的朋友可以參考下2019-01-01
vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06

