Vuex-state\getters\mutations\actions

     

请选择学历

     

大专

     

本科

   

如上述，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表示