繼續(xù)上一篇的vuex上手，我們完成了父組件和子組件A、子組件B。那么我們接下來就要將數(shù)據(jù)抽離出來，放到vuex中實現(xiàn)狀態(tài)管理。

Step 1：安裝vuex

npm install vuex --save

接著在src目錄下，新建一個store的文件夾，里面再新建一個index.js文件，然后開始給它加點代碼：

/* store/index.js */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        dataNum: 10
    }
})
export default store

細心的小伙伴肯定發(fā)現(xiàn)，我們的dataNum: 10仿佛似曾相識，而且它還被放在state中。沒錯，等會再來講這里，我們先去main.js文件把store引進去：

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'    // 在這里引入store

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,      // 在這里調(diào)用store
  components: { App },
  template: '<App/>'
})

好了，接下來，我們講一下剛剛繞過的這個知識點：

/* store/index.js */
const store = new Vuex.Store({
    state: {
        dataNum: 10
    }
})

這里的state你可以理解為狀態(tài)，總而言之它是用來存儲數(shù)據(jù)的，我們有一個叫dataNum的數(shù)據(jù)，需要在多個組件同時被調(diào)用且同時發(fā)生變更，那么就需要放在state中。

Step 2：去掉父子組件的冗余代碼

把App.vue中，data里面的數(shù)據(jù)刪除，整個data刪掉也行（本案例用不著了）;然后把兩個組件中的props都刪掉，重新寫一下data：

export default {
    data(){
        return{
             dataNum: this.$store.state.dataNum
        }
    }
}

兩個組件都是這樣寫就好。很明顯，我們現(xiàn)在是在組件本身上寫dataNum，然而，我們這里看到，dataNum的數(shù)據(jù)其實是這個：

this.$store.state.dataNum

沒錯，這就是我們獲取state中的數(shù)據(jù)所使用的方法。接下來去網(wǎng)頁觀看，你會發(fā)現(xiàn)數(shù)據(jù)正常獲取，我們接著走下一步。

Step 3：添加點擊事件

OK，這里需要著重說明，官方規(guī)定修改state中數(shù)據(jù)的唯一方法是：使用mutations ！因此我們先繞開getters，直接進入mutations的學習。
我們在store文件夾下面的index.js中，給mutations添加幾個方法：

/* store/index.js */

const store = new Vuex.Store({
    state: {
        dataNum: 10
    },
    mutations: {
        reduceNum(state, payload){  //減少數(shù)量
            state.dataNum -= payload;
        },
        addNum(state, payload){   // 增加數(shù)量
            state.dataNum += payload;
        },
        changeNum(state, payload){  //修改數(shù)量
            state.dataNum = payload;
        }
    }
})
export default store

我們可以看到，每個方法都有兩個參數(shù)——state和payload，第一個參數(shù)是直接引用了state，使我們下面的代碼可以直接state.dataNum，而不是this.$store.state.dataNum這么冗余。另一個參數(shù)payload，則是從組件發(fā)送過來的參數(shù)。我們定義這三個方法，分別是為了讓數(shù)量減少、增加，或者直接修改。我們來看在組件中要怎么調(diào)用這些方法，用組件B舉例：

<!-- 組件B（BCom.vue） -->
<template>
    <div>
        <input type="text" v-model="getDataNum">
        <button @click="reduceFn">按鈕 -</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // dataNum: this.$store.state.dataNum
        }
    },
    computed: {
        getDataNum: {  // v-modal中使用這個方法返回的值，每個方法都有get和set
            get(){
                return this.$store.state.dataNum;      // 獲取并返回state中的dataNum
            },
            set(val){
                this.$store.commit('changeNum', val);    // 調(diào)用mutations中的changeNum方法
            }
        }
    },
    methods: {
        reduceFn(){
            this.$store.commit('reduceNum',1);
        }
    }
}
</script>
<style scoped></style>

同理，組件A也是這么玩。這里需要注意的是，在組件中調(diào)用mutations中的方法，需要使用this.$store.commit('方法名'，參數(shù))才能調(diào)用。注意，這里的參數(shù)就是我們上面提到的payload。
OK，學到這里你已經(jīng)上手了，接下來回頭去學getters和actions吧，這兩個就很容易學會了！