大話Vuex

1、Vuex是什麼

官方定義：Vuex 是一個專爲 Vue.js應用程序開發的 狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化

通俗理解：

1. 主要應用於Vue.js中管理數據狀態的一個庫
2. 經過建立一個集中的數據存儲庫（store），供程序中全部組件訪問

總結：Vuex就是在一個項目中，提供惟一的管理數據源的倉庫。

2、爲何要用Vuex

單一使用Vue.js的場景

在單一使用vue.js的場景中，咱們不免要在不一樣的組件中互相傳值。在該場景中，由一個根組件，兩個父組件再各自擁有一個子組件，咱們若是使用prop的屬性傳值，在這個詳情組件須要使用添加組件中的某個值時，咱們須要不停的觸發某個事件將這個值一層一層一層一層地沿着這個路徑傳過去，這樣能實現將值傳遞給詳情組件，但這是至關的麻煩。如今讓咱們看下vuex.js場景下的效果

使用Vuex.js的場景

咱們將使用專門的store存儲全部的數據，若是咱們須要取到組件二或更深一級的子組件的某個數據咱們能夠直接使用getter方法直接拿到其中的數據。若是咱們須要向store中添加或更改某個數據，咱們能夠用mutation或直接$store.state的形式直接跨過父組件向store中直接添加或更改數據。就比如一個倉庫，全部人能直接跨過上級拿到倉庫中的某個你所須要的東西，這無疑是在咱們使用vue開發項目時，至關省時省力的辦法。

3、Vuex的使用場景

1. 當一個組件須要屢次派發事件
2. 跨組件/ 跨頁面共享數據

在頁面數據結構比較複雜，數據和組件分離，分別處理，組件量較大的狀況下，那麼使用 Vuex 是很是合適的。

4、Vuex的核心概念

1.store：Vuex建立的一個集中數據存儲庫，供程序中全部組件訪問

2.state：頁面數據狀態管理容器對象，頁面所須要的數據對象從該對象進行讀取；

3.getter：state的計算屬性，能夠從state中派生出新狀態

4.mutation：state的狀態數據對象改變的操做方法，好比將頁面的數據存儲在state對象中，或者改變state對象中的數據，都須要經過mutation進行操做。該方法只能進行同步操做
（提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。）

5.action：操做行爲處理模塊，經過提交mutation來變動狀態，能夠包含異步操做。
（異步邏輯都應該封裝到 action 裏面）

6.module：store能夠切分紅模塊，每一個模塊均可以擁有本身的state、getter、mutation、action

7.dispatch：操做行爲觸發方法，是惟一能執行action的方法；

8.commit：state狀態改變進行提交的操做方法，對mutation進行提交，是惟一能執行mutation的方法

5、Vuex過程解析

過程：

Vue組件接收交互行爲，調用dispatch方法觸發action相關操做處理，若頁面的數據狀態須要改變，則調用commint方法提交mutation修改state，經過getter能夠獲取到state對象的新值，從新渲染vue組件，界面隨之更新。

若是你以爲這篇文章對你有所幫助，那就順便點個贊吧，點點關注不迷路~

黑芝麻哇，白芝麻發，黑芝麻白芝麻哇發哈！

前端哇發哈