Chapter 2：光速上手vuex

继续上一篇的vuex上手，我们完成了父组件和子组件A、子组件B。那么我们接下来就要将数据抽离出来，放到vuex中实现状态管理。

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

细心的小伙伴肯定发现，我们的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,      // 在这里调用store
  components: { App },
  template: '<App/>'
})

好了，接下来，我们讲一下刚刚绕过的这个知识点：

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

这里的state你可以理解为状态，总而言之它是用来存储数据的，我们有一个叫dataNum的数据，需要在多个组件同时被调用且同时发生变更，那么就需要放在state中。

Step 2：去掉父子组件的冗余代码

把App.vue中，data里面的数据删除，整个data删掉也行（本案例用不着了）;然后把两个组件中的props都删掉，重新写一下data：

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

两个组件都是这样写就好。很明显，我们现在是在组件本身上写dataNum，然而，我们这里看到，dataNum的数据其实是这个：

this.$store.state.dataNum

没错，这就是我们获取state中的数据所使用的方法。接下来去网页观看，你会发现数据正常获取，我们接着走下一步。

Step 3：添加点击事件

OK，这里需要着重说明，官方规定修改state中数据的唯一方法是：使用mutations ！因此我们先绕开getters，直接进入mutations的学习。
我们在store文件夹下面的index.js中，给mutations添加几个方法：

/* store/index.js */

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

我们可以看到，每个方法都有两个参数——state和payload，第一个参数是直接引用了state，使我们下面的代码可以直接state.dataNum，而不是this.$store.state.dataNum这么冗余。另一个参数payload，则是从组件发送过来的参数。我们定义这三个方法，分别是为了让数量减少、增加，或者直接修改。我们来看在组件中要怎么调用这些方法，用组件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);    // 调用mutations中的changeNum方法
            }
        }
    },
    methods: {
        reduceFn(){
            this.$store.commit('reduceNum',1);
        }
    }
}
</script>
<style scoped></style>

同理，组件A也是这么玩。这里需要注意的是，在组件中调用mutations中的方法，需要使用this.$store.commit('方法名'，参数)才能调用。注意，这里的参数就是我们上面提到的payload。
OK，学到这里你已经上手了，接下来回头去学getters和actions吧，这两个就很容易学会了！