一、Vuex是什麼
官方定義：Vuex 是一個專爲 Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化
通俗理解：
- 主要應用於Vue.js中
管理數據狀態的一個庫 - 通過創建一個集中的數據存儲庫（store），供程序中所有組件訪問
總結：Vuex就是在一個項目中，提供唯一的管理數據源的倉庫。
二、爲什麼要用Vuex
單一使用Vue.js的場景
在單一使用vue.js的場景中，我們難免要在不同的組件中互相傳值。在該場景中，由一個根組件，兩個父組件再各自擁有一個子組件，我們如果使用prop的屬性傳值，在這個詳情組件需要使用添加組件中的某個值時，我們需要不停的觸發某個事件將這個值一層一層一層一層地沿着這個路徑傳過去，這樣能實現將值傳遞給詳情組件，但這是相當的麻煩。現在讓我們看下vuex.js場景下的效果
使用Vuex.js的場景
我們將使用專門的store存儲所有的數據，如果我們需要取到組件二或更深一級的子組件的某個數據我們可以直接使用getter方法直接拿到其中的數據。如果我們需要向store中添加或更改某個數據，我們可以用mutation或直接$store.state的形式直接跨過父組件向store中直接添加或更改數據。就好比一個倉庫，所有人能直接跨過上級拿到倉庫中的某個你所需要的東西，這無疑是在我們使用vue開發項目時，相當省時省力的辦法。
三、Vuex的使用場景
- 當一個組件需要多次派發事件
- 跨組件/ 跨頁面
共享數據
在頁面數據結構比較複雜，數據和組件分離，分別處理，組件量較大的情況下，那麼使用 Vuex 是非常合適的。
四、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的方法
五、Vuex過程解析
過程：
Vue組件接收交互行爲，調用dispatch方法觸發action相關操作處理，若頁面的數據狀態需要改變，則調用commint方法提交mutation修改state，通過getter可以獲取到state對象的新值，重新渲染vue組件，界面隨之更新。