vuex 核心内容（學習總結）

     vuex的由來：在父子元件通信中，隻有父元件通過props向子元件通信，傳遞資料，而子元件不能向父元件傳遞資料。這時候就出現了vuex。vuex作為資料的管理，将共享的資料單獨的列出來，做一系列操作。通過注入到根元件，全局可用。

vuex有五大核心：

state：

共享的狀态（-對象形式）

getters：

為了取得state的狀态，就有了getters，getters對象是為了擷取state資料。

mutations：

操作state狀态，也可以說是監控state資料。但是mutations隻能進行同步操作， 必須是同步函數。若為異步操作，就沒辦法同步捕捉到state的狀态。通過$store.commit()函數顯示調用（PS：參數一：mutations對象中對應函數的函數名，其餘參數自定義，根據操作而定）      this.$store.commit('xxx') 送出 mutation

actions：

操作states狀态，解決mutations沒有異步的缺陷。action 送出的是 mutation，mutation直接變更狀态。當某個動作觸發多個mutation的時候使用action，每一個action 函數接受一個與 store 執行個體具有相同方法和屬性的對象，比如叫做context對象，是以可以調用 context.commit 送出一個 mutation，通過 context.state 和 context.getters 來擷取 state 和 getters

     this.$store.dispatch('xxx') 分發 action

Mouidle：

使用單一狀态樹，應用的所有狀态會集中到一個比較大的對象。當應用變得非常複雜時，store 對象就有可能變得相當臃腫。Vuex 允許我們将 store 分割成子產品（module）。每個子產品擁有自己的 state、mutation、action、getter、甚至是嵌套子子產品——從上至下進行同樣方式的分割 。其實說簡單一點兒就是，比如我們寫一個商城，那麼我們有很多資料，但不是說都一起管理，我們可以分開管理，比如購物車訂單是一塊資料，物品單價是一塊資料，分開管理，用時引入即可，這樣既友善又靈活

還有一種子產品思想，就是分6個檔案

state.js ：在這裡面定義一些元件之間的公用狀态變量對象，然後export state對象

 getters.js ：在這裡面定義一些常量變量，它的值是函數的傳回值，用于擷取state.js中的對象的值；或者是當做store對象的計算屬性，對state.js的屬性對象進行計算，得到一些計算結果的變量，export多個常量

 mutation-types.js ：在這裡面定義一些操作mutation的字元串常量變量名，這裡是定義一些動作名，是以名字一般是set  或者是update,然後再結合state.js中定義的變量對象，export多個常量

 mutation.js：在這裡面定義一些修改state.js中變量對象的值的方法，這些方法都放在一個常量mutations對象裡面，然後export mutations

 actions.js ：在這裡面定義一些常量方法，每個常量方法用于送出多個mutation，然後輸出多個常量方法名

  store.js：在這裡面去引入其他5個JS檔案，然後export 一個Vuex.store({})的執行個體對象，然後再main.js檔案裡面import該js檔案，在Vue執行個體裡面添加store選項，即在根節點下注冊該store對象