摘要：和單純的全局對(duì)象有以下兩點(diǎn)不同的狀態(tài)存儲(chǔ)是響應(yīng)式的。改變中的狀態(tài)的唯一途徑就是顯式地提交。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好還是作為組件的局部狀態(tài)。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。

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

vuex下載地址:https://unpkg.com/[email protected]

下載之后用< script >標(biāo)簽包裹引入即可

npm install vuex --save

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

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

Vue.use(Vuex)

當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)，不需要以上安裝過程。

vuex就是一個(gè)狀態(tài)(數(shù)據(jù))管理工具,每一個(gè)vuex都有一個(gè)store(倉庫),store是一個(gè)容器,它包含著你的應(yīng)用中大部分的狀態(tài)(state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同:
1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
2.你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交(commit) mutations。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

創(chuàng)建vuex

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

// 調(diào)用mutation中的"jia"方法
store.commit("jia")
// 查看數(shù)據(jù)狀態(tài)
console.log(store.state.msg)

再次強(qiáng)調(diào)，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。這個(gè)簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。此外，這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變，保存狀態(tài)快照的調(diào)試工具。有了它，我們甚至可以實(shí)現(xiàn)如時(shí)間穿梭般的調(diào)試體驗(yàn)。

上面我們已將vuex創(chuàng)建,那么如何在組件中進(jìn)行使用呢?
我們只需要在組件中利用計(jì)算屬性rutern出store.state.msg即可,觸發(fā)變化也只是在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 使用 單一狀態(tài)樹 —— 是的，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)『唯一數(shù)據(jù)源(SSOT)』而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

單狀態(tài)樹和模塊化并不沖突 —— 在后面的章節(jié)里我們會(huì)討論如何將狀態(tài)和狀態(tài)變更事件分布到各個(gè)子模塊中。

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

因?yàn)槲覀冊(cè)诟鶎?shí)例已經(jīng)注冊(cè)了store,所以我們也可以使用這種寫法

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

這樣我們?cè)谀K化的構(gòu)建系統(tǒng)中，在每個(gè)需要使用 state 的組件中就不需要頻繁地導(dǎo)入，并且在測(cè)試組件時(shí)不需要模擬狀態(tài)。

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：

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

mapState 函數(shù)返回的是一個(gè)對(duì)象。我們?nèi)绾螌⑺c局部計(jì)算屬性混合使用呢？

對(duì)象展開運(yùn)算符可以將mapstate與局部計(jì)算屬性混合使用

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

使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會(huì)使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會(huì)使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好還是作為組件的局部狀態(tài)。你應(yīng)該根據(jù)你的應(yīng)用開發(fā)需要進(jìn)行權(quán)衡和確定。

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

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

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

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

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

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

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

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

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

當(dāng)使用對(duì)象風(fēng)格的提交方式，整個(gè)對(duì)象都作為載荷傳給 mutation 函數(shù)，因此 handler 保持不變：

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

Action 類似于 mutation，不同在于：

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

讓我們來注冊(cè)一個(gè)簡單的 action：

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

Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。當(dāng)我們?cè)谥蠼榻B到 Modules 時(shí)，你就知道 context 對(duì)象為什么不是 store 實(shí)例本身了。

實(shí)踐中，我們會(huì)經(jīng)常用到 ES2015 的 參數(shù)解構(gòu) 來簡化代碼（特別是我們需要調(diào)用 commit 很多次的時(shí)候）：

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