vuex模块化

vuex模块化

当我们开发的项目比较大时，store中的数据就可能比较多，这时我们store中的数据就可能变得臃肿，为了解决这一问题，我们就需要将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块

注意：被模块化的store须要开启命名空间

模块A：a.js

export default {
    namespaced: true,//开启命名空间
    state: {
    	sum:0,
    	number:0
    },
    mutations: {
    	ADD_NUM(state,value){
  			state.sum+=value
  		}
    },
    actions: {
    },
}

模块B：b.js

export default {
    namespaced: true,//开启命名空间
    state: {
    	name:'张三',
    	personList:[]
    },
    mutations: {
    	ADD_PERSON(state,value){
    		state.personList.unShift(value)//把数据添加到数组的首位
    	}
    },
    actions: {
    	addZhang(context,value){
    		//value参数是一个对象
    		if(value.name.indexOf('张')===0){
    			context.commit('ADD_PERSON')
    		}else{
    			alert('这个人不姓张！')
    		}
    	},
    	addServer(context,value){
    		axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(res=>{
    			context.commit('ADD_PERSON',{name:res.data})
    		},error=>{
    			alert(error.message)
    		})
    	}
    },
    getters: {
    	firstName(state,getters){
 			return state.personList[0].name+',你好！'
 		}
    }
}

store/index.js：在modules中引入

import Vue from 'vue'
import Vuex from 'vuex'

//引入
import moduleA from './a.js'
import moduleB from './b.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {//模块化
    moduleA,
    moduleB
  }
})

这时我们在项目中如何取用呢？

1. 访问state数据：
   第一种方式：this.$store.state.moduleA.sum
   第二种方式：

 import {mapState} from 'vuex'
 computed:{
 	...mapState('moduleA',['sum','number'])
 }

1. 修改state数据：
   第一种方式：this.$store.commit('moduleA/ADD_NUM',10)
   第二种方式：

 import {mapMutations} from 'vuex'
 methods:{
	...mapMutaions('moduleA',['ADD_NUM']),
 	}

2. action提交mutation：
   第一种方式：this.$store.dispatch('moduleB/addZhang',{name:'小明',age:18}) this.$store.dispatch('moduleB/addServer')
   第二种方式：

 <button @click="addZhang({name:'张2'})">添加姓张的人+</button>

 import {mapActions} from 'vuex'
 methods:{
 	...mapActions('moduleB',['addZhang']),//参数在调用时传递 addZhang({name:'小明',age:18})
 }

4. getters ，store的计算属性（加工数据）
   第一种方式：this.$store.getters['moduleB/firstName']
   第二种方式：

 import {mapGetters} from 'vuex'
 computed:{
 	...mapGetters('moduleB',['firstName'])//数组写法（简写）
 }