封装vuex(模块化)

封装vuex(模块化)

原理

利用Vuex的modules进行模块形式的封装，使用getter来映射state

index.js

	import vue from "vue"
	import vuex from "vuex"
	import module1  from "模块1路径"
	import module2 from "模块2路径"
	import getters from "getters路径"


	vue.user(vuex)

	const store = new Vuex.Store({
		modules:{
			module1 ,
			module2
		},
		getters
	})
	export default store
	

这样就完成了按照模块化封装vuex的主体

模块内部（举例模块1）

const module1 ={
	state:{
		count:0
	},
	ADD_NUM：state=>state.count+=10
}
export default module1

getter内部实现

const getters = {
	count:state=>state.module1.count
	}
	export default getters

业务代码使用

使用说明：
利用mapGetters映射getters里面的state数据
利用mapMutations映射module1里面的ADD_NUM方法

	import {mapGetters} from "vuex"
	import {mapMutations} from "vuex"
    export default {
        computed:{
        ...mapGetters(['count'])
        },
        methods:{
        ...mapMutations({
          add:'ADD_NUM'
        }),
        addNum(){
          this.add()
        }
      }
  }