Module 模块
前言:
如果你项目非常大,如果只有一个模块来维护数据,那么这个模块会非常大,
对于可维护性来说就不是特别高,所以vuex给我们提供了模块的功能
我们可以通过modules来将vuex处理为多个模块
1. 定义Store中的模块
说明:
- 通过store中的modules选项定义模块
- 每个模块都有自己的state,getter,mutation,action
示例代码:
let moduleFruits = {
state:{
fruits:[{
name:"苹果",
price: 22
},{
name:"梨子",
price: 25
},{
name:"西瓜",
price: 16
},{
name:"香蕉",
price: 18
}]
},
getters:{
filterFruits(state){
return state.fruits.filter(fruit => fruit.price > 20)
}
},
mutations:{
addFruit(state,payload){
console.log(arguments);
state.fruits.push({
name:payload.name,
price: payload.price
})
}
},
actions:{
asyncAdd(context,payload){
console.log(arguments);
context.commit("addFruit",payload)
}
}
}
let store = new Vuex.Store({
state:{
count:0,
user:{
name:"张三",
age:20
},
},
getters:{
//...
},
mutations:{
//...
},
actions:{
//...
},
modules:{
goods:moduleFruits
}
})
2. 组件中获取模块中的数据
2.1 获取模块中的state状态
$store.state.goods.fruits
说明:
-
$store就是Store仓库 -
state获取state数据 -
goods为modules中的模块名称 -
fruits为模块goods中state数据
2.2 获取getter计算属性
$store.getters.filterFruits
注意:
- store中getters的计算属性不能和模块中的getters计算属性重名
- 如果重名,
vuex用用store中的getter计算属性替换模块中的计算属性
3. 组件操作store中的mutation和action
3.4 commit方法
触发mutation中的方法和触发store中的方法一直
this.$store.commit({
type:"increment",
name:"菠萝",
price: 22
})
3.5 store中的mutation方法和store中的重名
说明:
如果mutation方法重名,会先执行store中的,在执行自己
也就是说所有同名的mutation函数都会执行
只不过每一个mutation函数修改的状态不同
3.6 dispatch方法
组件中使用dispath方法触发action方法,
this.$store.dispath({
type:"asyncIncrement",
name:"菠萝",
price: 22
})
如果重名都会执行
