這兩天學(xué)習(xí)了下vuex，vuex官方解釋是狀態(tài)管理，用來統(tǒng)一管理和維護(hù)各個(gè)vue組件的可變化狀態(tài)

官方解釋說的太抽象，我來解釋下：vuex 其實(shí)就是用來管理各個(gè)頁面之間需要共同使用的對象數(shù)據(jù)

舉個(gè)例子你們就知道了：

a頁面中調(diào)用一個(gè)username屬性，并且會對這個(gè)屬性進(jìn)行值修改，比如把username的值改成張山，李四，王麻子，這些操作。

這個(gè)時(shí)候有個(gè)需求就是a頁面修改的這個(gè)username屬性在b頁面也需要展示，并且值需要跟a頁面同步，

那么這個(gè)時(shí)候vuex的作用就來了，你可以把username 聲明到vuex中，然后在vuex中的進(jìn)行操作，值的改變會響應(yīng)到a頁面跟b頁面，這個(gè)時(shí)候數(shù)據(jù)就同步成功了。

Vuex有五個(gè)核心模塊：state、getters、mutations、actions、modules。我來分別解釋下各自的作用

一：state

state 就是用來聲明對象或者屬性的地方

二：actions

actions模塊 其實(shí)就是暴露在頁面中的方法，你在頁面中需要調(diào)用方法更改state的值，那么你就可以在actions 模塊中聲明一個(gè)方法。然后在頁面中通過 “this.$store.dispatch("updateCounnt")“ 進(jìn)行調(diào)用

三：mutations

mutations是用于更改state屬性對象的模塊，state 中定義的對象屬性只能通過mutations模塊中來更改，因?yàn)閟tate 對象只能在mutations獲取到，通過 "commit("addCount")" 來調(diào)用mutations模塊中的方法

以上三個(gè)模塊，用以下圖示例：

這圖片示例應(yīng)該解釋的很到位吧

四：modules

modules就是用來分模塊，比如你管理的對象需要按模塊來區(qū)分，那么就可以在這里定義。比如：用戶信息模塊跟訂單模塊。如下圖：

然后再展示下模塊中user跟order是怎樣定義的：

user.模塊

order模塊

這就是modules 的作用，目的就是模塊化

五：getters

我對getter作用的理解就是把調(diào)用this.$store.XXXX 的方式進(jìn)行了一次封裝，以往在頁面調(diào)用vuex中的某個(gè)屬性的時(shí)候一般都是用 “this.$store.XXXX” 來調(diào)用。這種方式調(diào)用的話在代碼上比較冗余，如果我要獲取5，10個(gè)屬性的話，你得寫10個(gè)this.$store.XXXX了，那很明顯不合適。getter 就是用來解決這個(gè)問題的

如圖：

getter.js中的聲明

vue頁面中的調(diào)用方式：

到這里Vuex的講解已經(jīng)結(jié)束了，其實(shí)Vuex的邏輯很簡單，使用起來非常強(qiáng)大，動手寫一遍就明明白白了。