继续上一篇的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吧，这两个就很容易学会了！
网友评论