如上述，xueli绑定的值是字符串1，2，3，如改成如下加上v-bind的形式，数据监测的值为数字
或者v-model.number="xueli" 也可以完成相同的要求
vux-getters
getters: {/* 计算组件中数据，可以对其二次加工，类似computed */
/* 具有缓存功能，如果state中的数据得到了改变，那么getters中的属性也会发生改变， 反之则不会改变 */
getDazhuan:function(state){
return state.list.filter(r=>r.xueli=='大专')
}
getter中的数据，组件可以使用this.$store.getters.getDazhuan获取
state中的数据，组件可以使用this.$store.state.list获取
组件可以在methods中创建事件，利用commit传值给mutations或者dispatch传值给actions
methods:{
del(){
this.$store.commit('DELNUM',this.num)
} ,
add(){
this.$store.dispatch('addajax',this.num) 括号中两个参数，第一个表示事件名，第二个是传参
} }
mutations: {
DELNUM:function(state,payload){
state.num-=payload
},
ADDNUM:function(state,data){
state.num+=data
}},
actions: {/* 调后台接口并commit提交一个mutations
里面的方法用小写为了区分mutations里面的方法*/
/* 异步请求要放在actions方法中去写 ，不要再组件中去写，不然起不到作用 */
addajax({commit},data){
/* 使用解构出来的commit方法来提交一个mutation方法ADDNUM来修改state中的值 */
setTimeout(()=>{ 异步请求
commit('ADDNUM',data) 触发$sotre.mutations中的ADDNUM方法
},500)
}
},
导出vuex中的mapState,mapGetters方法
import {mapState,mapGetters} from 'vuex'
computed:{
/* 利用mapState方法使用拓展运算符把list,getDazhuan解构在计算属性中 */
mapState(['list'])
mapGetters(['getDazhuan','getBenke'])
}
插值中可以直接用list,getDazhuan,getBenke表示
vue实例中可以直接用this.list,this.getDazhuan,this.getBenke表示