1、vuex簡介以及創建一個簡單的倉庫
vuex是專門為vue框架而設計出的一個公共數據管理框架，任何組件都可以通過狀態管理倉庫數據溝通，也可以統一從倉庫獲取數據，在比較大型的應用中，數據交互龐大的情況下，推薦使用vuex管理。Vuex狀態管理有五個核心的概念，分別為state、getters、actions、mutations、modules,接下來，將一起來研究一下這五個對象的具體使用，在此之前我們先在src文件下創建一個狀態管理文件夾store，創建index.js文件（注：下圖是在項目中更改，不要被其他代碼干擾，關注標記就行了）
在main.js中引用並在vue實例中注冊
接下來我們在index.js中創建一個簡單的狀態管理，並在其他組件中獲取和更改：
如上圖便是一個最基礎的狀態管理，用到了剛剛五個屬性中的兩個，接下來我們來解析一下代碼，首先引入vue以及vuex，並在vue中使用，然后創建一個store實例。然后我們來說一下兩個屬性，第一個為state，它是一個對象，它的的作用相當於倉庫的容器，用來儲存所有公共數據；第二個為mutations，它也是一個對象，對象里面是一個一個的方法，這些方法說白了就是來儲存和改變state里面的數據；關於基礎的狀態管理我們就了解完了，接下來我們在組件中去獲取和改變狀態管理中的數據；
我們在mounted函數中獲取到了狀態管理數據，結果為null，因為我們定義的就是null，下面我們來改變狀態管理中的treeData值；
我們通過store的commit方法提交改變狀態值，第一個參數為mutations里面的方法名，第二個參數為要改變的數據值，改變后立馬獲取就能得到改變后的值，一般多用在多組件之間的通信和數據共享。以上就是創建一個基本的狀態管理庫
2、vuex的模塊化管理
想象一下，如果管理數據多了起來，index.js也將變成一個數據龐大的文件，難以維護，而且還有一些復雜的需求也難以滿足，這個時候我們就想起了模塊化管理，是的，狀態管理也提供了模塊化管理，這就是五個概念中的modules，它的出現便是為了模塊化管理，下面我們在store文件夾下面構建modules文件夾，用來存放模塊js文件。
下面是我們index.js改變的代碼
下面是test.js中的代碼
上面結構就是最基本的模塊化狀態管理，當然在組件的獲取方式也得改變，代碼如下
如上圖就是模塊化管理的獲取方式；
3、vuex中的actions和getters
五個重要概念中還剩下getters、actions這兩個概念，我們先說actions吧，actions和mutations非常接近，都是用來處理state中的數據，但是它可以異步處理，而mutations中只能同步，但是actions卻不能直接處理state中的數據，它必須借助mutations里面的函數，所以一定要記住，能改變state中數據的方法，只有mutations可以做到。
那么我們現在來探討一下mutations為什么不能異步！！！先上代碼
現在我們把賦值state值改為異步，然后再來獲取一下
結果為兩個null，因為狀態是實時獲取的，而獲取到的時候異步還沒開始執行，所以都為null。這樣就不能實時的改變獲取數據，導致數據獲取總是“慢了一拍”，實際需求中需要從狀態管理中調取接口從后台獲取數據，而接口都是異步的函數，那怎么辦呢？所以actions的出現就是為了解決這個疑難雜症的，讓我們來操作一番。上代碼：
在test對象中加入actions對象，對象里面的函數其實就是對數據進行操作后再提交到狀態管理mutations里面來改變數據，這里多用於異步操作，比如在函數請求后台數據后返回組件頁面（不推薦）或者異步改變狀態管理里面的值，它多用於和另外的一個概念一起配合使用，那就是getters屬性，getters屬性相當於組件的computed屬性，它可以處理和緩存state中的數據，當state中有更新的時候它也會跟着更新，接下來我們來部署getters，首先在store創建getters.js文件
getters.js代碼，getters需要在store中注冊；
這里我們過濾上面我們改變的數據，一律改為“我是阿格斯之盾”，接着在剛剛輸出的地方打印出來看看：
這里獲取getters里面的屬性值的方法可以直接通過getters暴露給store的屬性中直接獲取
4、vuex中的輔助函數
這里我們只說mapState函數，其他函數都和它類似，感興趣的小伙伴可以自行了解喲
mapState輔助函數
當一個組件需要同時獲得多個狀態的時候，為每個狀態去聲明顯得代碼臃腫，這個時候就得用到mapState函數了：
先在組件中導入mapState函數
然后在computed中導入mapState函數，這里用的是擴展運算符，然后就可以在函數中直接獲取到test狀態里面的所有數據了，其他的幾個輔助函數都和這個差不多，感興趣的小伙伴自行了解一下吧，學無止境，喜歡就點個贊吧~