vuex辅助函数以及模块化

vuex辅助函数

/* 导出vuex中的mapState,mapGetters,mapMutations,mapActions方法 */

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' 

computed:{

    /* 利用mapState方法使用拓展运算符把list,getDazhuan解构在计算属性中 */

    /* ...mapState(['list']) */

    /* ...mapGetters(['getDazhuan','getBenke']) */

有一种场景，vue实例化对象里的数据名和map方法出来的方法名字一致，需要改名使用一种对象的形式

    ...mapState({lista:'list'})       /

}

methods:{

     ...mapMutations(['DELNUM']),

      /* this.$store.cpmmit('DELNUM',this.num) */

    /* 利用mapActions方法使用拓展运算符吧actions的方法解析在methods中 ，在this中也可以找到对应解析出来的方法 */

    ...mapActions(['addajax']),

      /* this.$store.dispatch('addajax',this.num) */

}

模块化  modules

在store目录下创建modules文件夹，创建modA.js文件。

/* 模块的局部状态 */

/* 箭头函数如果需要返回对象，需要使用()包一下 */

const state=()=>({

    modaStr:'我是模块A的数据'

  })

const getters={

  strGetter(state){

    return state.modaStr+'getter'

  }

  }

const mutations={

  CHANGESTRA(state,payload){

    state.modaStr=payload

  }

  }

const actions={

  waitStr({commit},data){

    setTimeout(() => {

      commit('CHANGESTRA',data)

    }, 1500);

  }

  }

  export default{

    /* 保证模块之间的数据独立运行，不会相互影响 */

    namespaced:true,

    state,

    getters,

    mutations,

    actions

  }

index.js文件中导入文件    import modA from '@/store/modules/modA'

模块化                               modules: {         modA: modA,         }

mapState,mapGetters中的数据可以直接在插值中表达

mapState           

{{$store.state.modA.modaStr}}

mapGetters       

{{$store.getters['modA/strGetter']}}

mapMutations,mapActions需要在组件methods中通过方法触发

                                  methods:{

mapMutations                  this.$store.commit('modA/CHANGESTRA','后来的我们没有走到一起')

mapActions                      this.$store.dispatch('modA/waitStr','异步处理完成')            
                                                                             }