初識Vuex

Vuex是什麼

Vuex是一個專爲Vue開發的應用程序的狀態管理模式，它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
Vuex採用相似全局對象的形式來管理全部組件的公用數據，若是你想一想修改這個全局對象的數據？是能夠的，但沒那麼簡單，你得按照Vuex提供的方式來修改，不能本身隨意用本身的方式來修改。

使用Vuex的好處

爲何說只是相似全局對象呢？

說的是相似，就表明它跟咱們以前使用的定義全局對象變量還不徹底同樣。主要有一下兩點不一樣：

• 1.Vuex的狀態存儲是響應式的，什麼意思呢？就是當你的組件使用到了這個Vuex的狀態，一旦它改變了，全部關聯的組件都會自動更新相對應的數據，這樣開發者省事不少。

• 2.你不能直接修改Vuex的狀態，若是是個全局對象變量，要修改很容易，可是在Vuex中不能這樣作，想修改就得使用Vuex提供的惟一途徑：顯示地提交（commint）mutations來實現修改。這樣作的好處就是方便咱們跟蹤每個狀態的變化，在開發過程當中調試的時候，很是實用。

以上兩點是Vuex狀態管理跟使用傳統全局變量的不一樣之處，也是Vuex的優點所在。那是否是全部使用vue開發的SPA（single page application）單頁應用都適合採用Vuex呢？

適用場景

固然也不是，若是你的應用是個小型的應用，組件很少，組件之間的狀態依賴很少，關係清晰容易維護，也就是說不一樣組件之間不多有數據之間的關聯的話，那麼你大可不用Vuex來開發。

反之，若是你開發的是較大型的應用，出現多個視圖組件共同依賴一個狀態，這個狀態至關於咱們的全局對象數據，其餘組件的改動，會影響到它，反之，它的修改也須要更新其餘關聯的組件，那麼Vuex就很適用。好比：商城系統，外賣系統等等。

如何使用Vuex

（1）建立倉庫Store
要使用Vuex，咱們要建立一個實例 store ，咱們稱之爲倉庫，利用這個倉庫 store 來對咱們的狀態進行管理。

//建立一個 store
 const store = new Vuex.Store({});

（2）核心：state
Vuex的做用相似全局對象，Vuex 使用單一狀態樹，用一個對象State包含了整個應用層級的全部狀態，你能夠理解爲這些狀態就是一堆全局變量和數據。

//建立一個 store
 const store = new Vuex.Store({
    //state存儲應用層的狀態
    state:{
        count:5  //總數：5
    }
 });

上面的例子中，假設咱們有一個全局狀態count的值爲5。那麼，咱們就能夠將其定義爲 state 對象中的key和value，做爲全局狀態供咱們使用。

state 中的狀態被各個組件關聯着，在開發調試過程當中，咱們能夠結合vue-devtool工具，能夠清晰地看到整個應用的數據，很是方便。

（3）核心：Getters
當咱們須要在data的基礎上再派生一些狀態的時候，就會使用computed來實現。

一樣，當咱們須要從 state 中派生出一些狀態的時候，就會使用到 getters ，你能夠將 getters 理解 state 的計算屬性。

getters 接受 state 做爲其第一個參數：

const store = new Vuex.Store({
   //state存儲應用層的狀態
   state:{
      count:5  //總數：5
    },
    //派生出來的狀態
   getters:{
      //ES6 的箭頭函數語法
    newCount:state => state.count * 3
    }
 });

（4）核心：Mutations
Vuex給咱們提供修改倉庫 store 中的狀態的惟一辦法就是經過提交mutation。咱們來看看如何定義一個mutation，它和上面的 getters ，會接受 state 做爲第一個參數：

const store = new Vuex.Store({
    //state存儲應用層的狀態
    state:{
        count:5  //總數：5
    },
    //更改store狀態的惟一途徑
    mutations:{
        increment(state){
            state.count ++;
        }
    }
 });

咱們再 mutations 中定義了一個叫increment的函數，函數體就是咱們要進行更改的地方，能夠看到，咱們只是簡單地對 state 中的count進行了自增運算。

mutations 咱們是定義好了，怎麼使用呢？
Vuex要求咱們要想經過 mutations 更改內容，就必須提交mutation，語法以下：

//提交一個名爲increment的mutation
 store.commit('increment');

咱們再提交commit 時候，字符串參數increment,就是對應在 mutations 中的increment。

此外，store.commit( ) 還接受其餘額外的參數，好比：

//...
 //更改store狀態的惟一途徑
 mutations:{
    increment(state,n){
        state.count += n;
    }
 }
 //...
 store.commit('increment',10);

咱們在提交的時候額外傳了參數10，只要在定義 mutations 的時候定義與之相對應的形參就能夠處理了。