摘要：和單純的全局對象有以下兩點不同的狀態存儲是響應式的。改變中的狀態的唯一途徑就是顯式地提交。如果有些狀態嚴格屬于單個組件，最好還是作為組件的局部狀態。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。

vuex為我們提供了兩種使用方法

vuex下載地址:https://unpkg.com/vuex@2.0.0

下載之后用< script >標簽包裹引入即可

npm install vuex --save

在一個模塊化的打包系統中，您必須顯式地通過 Vue.use() 來安裝 Vuex：

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

當使用全局 script 標簽引用 Vuex 時，不需要以上安裝過程。

vuex就是一個狀態(數據)管理工具,每一個vuex都有一個store(倉庫),store是一個容器,它包含著你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有以下兩點不同:
1.Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
2.你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交(commit) mutations。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

創建vuex

var store = new Vuex.store({
    // 數據放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 寫法
        jia(state){
            state.msg++
        }
    }
})

// 調用mutation中的"jia"方法
store.commit("jia")
// 查看數據狀態
console.log(store.state.msg)

再次強調，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因為我們想要更明確地追蹤到狀態的變化。這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓我們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，我們甚至可以實現如時間穿梭般的調試體驗。

上面我們已將vuex創建,那么如何在組件中進行使用呢?
我們只需要在組件中利用計算屬性rutern出store.state.msg即可,觸發變化也只是在methods里面提交mutation.

var vm = new Vue({
    el:"#box"
    components:{
        home:{
            computed:{
                msg(){
                    return store.state.msg
                }
            },
            template:`  

                            {{msg}}
                            
                        
`,
            methods:{
                jia:function(){
                    store.commit("jia")
                }
            }
        }
    }
    
})

Vuex 使用 單一狀態樹 —— 是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個『唯一數據源(SSOT)』而存在。這也意味著，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

單狀態樹和模塊化并不沖突 —— 在后面的章節里我們會討論如何將狀態和狀態變更事件分布到各個子模塊中。

computed:{
    msg(){
        return store.state.msg
    }
},

因為我們在根實例已經注冊了store,所以我們也可以使用這種寫法

computed:{
    msg(){
        return this.$store.state.msg
    }
},

這樣我們在模塊化的構建系統中，在每個需要使用 state 的組件中就不需要頻繁地導入，并且在測試組件時不需要模擬狀態。

當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性，讓你少按幾次鍵：

computed: mapState({
    // 箭頭函數可使代碼更簡練
    msg: state => state.msg,
})    

mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢？

對象展開運算符可以將mapstate與局部計算屬性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

使用 Vuex 并不意味著你需要將所有的狀態放入 Vuex。雖然將所有的狀態放到 Vuex 會使狀態變化更顯式和易調試，但也會使代碼變得冗長和不直觀。如果有些狀態嚴格屬于單個組件，最好還是作為組件的局部狀態。你應該根據你的應用開發需要進行權衡和確定。

getters可以說是store的計算屬性,它可以接受state作為第一參數和其他getters作為第二參數來進行計算,這樣我們就可以在多個組件使用這個gtters而不必在每一個組建都書寫一遍.

var store = new Vuex.store({
    // 數據放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 寫法
        jia(state){
            state.msg++
        }
    },
    getters:{
       jiajia(state){
           state.msg+5
       } 
    }
})

computed: {
  // 使用對象展開運算符將 getters 混入 computed 對象中
    ...mapGetters([
      "jiajia",
    ])
  }

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數：

mutations:{
    // es6 寫法
    jia(state){
        state.msg++
    }
},

你可以向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）：

mutations: {
  increment (state, n) {
    state.msg += n
  }
}

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

store.commit({
  type: "increment",
  amount: 10
})

當使用對象風格的提交方式，整個對象都作為載荷傳給 mutation 函數，因此 handler 保持不變：

mutations: {
  increment (state, payload) {
    state.msg += payload.amount
  }
}

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意異步操作。

讓我們來注冊一個簡單的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit("increment")
    }
  }
})

Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。當我們在之后介紹到 Modules 時，你就知道 context 對象為什么不是 store 實例本身了。

實踐中，我們會經常用到 ES2015 的 參數解構 來簡化代碼（特別是我們需要調用 commit 很多次的時候）：

actions: {
  increment ({ commit }) {
    commit("increment")
  }
}