詳解Vuex的屬性和作用

更新時(shí)間：2021年12月27日 08:46:34 作者：慢慢變亮~

這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

Vuex是什么？

VueX是一個(gè)專門為 Vue.js 應(yīng)用設(shè)計(jì)的狀態(tài)管理架構(gòu)，統(tǒng)一管理和維護(hù)各個(gè)vue組件的可變化狀態(tài)(你可以理解成 vue 組件里的某些 data )。

vuex 可以理解為一種開發(fā)模式或框架。比如 PHP 有 thinkphp ，java 有 spring 等。

通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動(dòng)組件的變化（好比 spring 的 IOC 容器對(duì) bean 進(jìn)行集中管理）。

Vuex有五個(gè)核心概念，state, getters, mutations, actions, modules。

應(yīng)用級(jí)的狀態(tài)集中放在 store 中；改變狀態(tài)的方式是提交 mutations ，這是個(gè)同步的事物；異步邏輯應(yīng)該封裝在 action 中。

Cuex借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。

狀態(tài)管理: 簡單理解就是統(tǒng)一管理和維護(hù)各個(gè)vue組件的可變化狀態(tài)(你可以理解成vue組件里的某些data)

Vuex的5個(gè)屬性

state：單一狀態(tài)樹，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。
getters：就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。
mutations：每個(gè)mutation都有一個(gè)字符串的事件類型 (type) 和一個(gè)回調(diào)函數(shù) (handler)。
action：action 類似于mutation，不同在于：action 提交的是mutation，而不是直接變更狀態(tài);action可以包含任意異步操作。
modules：模塊化vuex，每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。

vuex 的 State 特性是？

1 、Vuex 就是一個(gè)倉庫，倉庫里面放了很多對(duì)象。其中 state 就是數(shù)據(jù)源存放地，對(duì)應(yīng)于與一般 Vue 對(duì)象里面的 data。

2 、state 里面存放的數(shù)據(jù)是響應(yīng)式的，Vue 組件從 store 中讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新。

3 、它通過 mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性中。

vuex 的 Getter 特性是？

1 、getters 可以對(duì) State 進(jìn)行計(jì)算操作，它就是 Store 的計(jì)算屬性

2 、雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getters 可以在多組件之間復(fù)用

3 、如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用 getters

vuex 的 mauation 特性是？

1、mutation是一個(gè)對(duì)象包含多個(gè)直接更新state的方法(回調(diào)函數(shù))

2、只能包含同步的代碼, 不能寫異步代碼

vuex 的 action 特性是？

1 、action 類似于 mutation ，不同在于：

2 、action 提交的是 mutation ，而不是直接變更狀態(tài)。

3 、action 可以包含任意異步操作

什么情況下應(yīng)該使用 Vuex？

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

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