vuex：針對vue應用派生的專門管理應用state的工具，state可以了解為我們元件需要操作的data資料，都知道，vue建構spa應用的時候，随着元件規模的提升，各個子元件之間的通信如果采用子元件->dispatch->父元件->broadcast->子元件的方式将會異常坑爹，因為你要時刻清楚該事件是由哪個元件傳過來的又将傳送到哪個元件，vuex的誕生便是将這些資料流動統一交由vuex去處理，元件要做的僅僅是向state中放值及取值。vuex總計分為四大元件，分别是：state、mutations、getters及actions，其中state就是我們要操作的資料，在元件中通過getters擷取，mutations好比各個事件，由actions通過dispatch調用，而mutations操作state後可以直接在元件中getters擷取該state資料，這樣就形成了一個資料的閉環。官方的示意圖如下：
學習vue.js的時候看到有哥們寫的筆記本應用，用到的技術棧：vue.js、vuex、webpack，原文連結點這裡，先來看下效果圖：
其實主要是對vuex的一個學習總結，項目結構如下：
首先是元件：
該應用總共分為3大元件：toolbar側邊欄元件、notelist筆記清單元件、editor編輯區元件，下面拿toolbar元件說下，先來看下toolbar元件代碼：
這裡先導入需要調用的actions，然後通過export導出vuex配置對象，webpack自動會為我們打包，這裡的getters包含了一個函數activeNote，所有getters函數第一個參數是vuex的state對象，也就是資料源對象，在getters函數内部可以直接通過state取出相關資料，這裡是es6的寫法而已。然後actions中定義了一系列元件單擊調用的方法，比如addNote，再來看下actions.js内部具體的寫法：
上面的addNote調用的actions就是這裡的addNote，形參dispatch用來向mutations派發事件，這裡的actions還有一個預設參數就是e，代表目前操作的html對象，當然通過e.target.value可以直接擷取input輸入框的值。mutations中詳細代碼：
mutations中的參數個數和從actions那裡dispatch過來的一樣，dispatch有幾個參數，這裡mutations就有幾個，在mutations中，一般進行state資料的相關操作，比如這裡的ADD_NOTE就是向state中的notes對象數組添加新的對象，然後再設定目前note處于激活狀态，這裡設定好值之後，在元件中的getters裡面，便直接可以通過擷取state對象中的資料進行元件資料的回顯了。