vuex的辅助用法

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name:"App",
  computed:{
    ...mapState(['num']),
    ...mapGetters(['getDaZhuan','getBenke'])
  },
  methods:{
    /* 利用mapMutations方法使用拓展运算符把mutations的方法解构在methods中 
     在this中也可以找到对应解构出来的方法*/
    /* ...mapMutations(['ADD','DEL']), */
    /* 如果mutations中的方法名和methods中的同名了，可以采用对象的形式修改 */
    ...mapMutations({
      addfn:'ADD',
      delfn:'DEL'
    }),
    /* 类似于下面 */
    /* ADD:function(){...},
    DEL:function(){...}, */
    addNum(){
      /* this.$store.commit('ADD',2) */
      /* this.ADD(2) */
      this.addfn(2);
    },
    delNum(){
      /* this.$store.commit('DEL',2) */
      /*  this.DEL(2) */
      this.delfn(2)
    },
    ADD(){
      console.log(2)
    },
    /* 利用mapActions方法使用拓展运算符把actions的方法解构在methods中 
     在this中也可以找到对应解构出来的方法*/
    /* 会在methods中解构成类似的形式 */
    /* addajax:function(){...},*/
    /* ...mapActions(['addajax']), */
    /* 如果actions中的方法名和methods中的同名了，可以采用对象的形式修改 */
    ...mapActions({
      addajax2:'addajax'
    }),
    ajaxfn(){
      this.addajax2(5)
    },
    addajax(){
      console.log(5)
    }
  }
  
  
}

模块化  modules

在story文件夹下面创建文件夹model，在里面创建modeA.js

使用并导出

在index.js里面配置并使用

在app.vue里面使用