第三十一节(补充):Vuex状态管理:模块选项modules

Module 模块

前言:

如果你项目非常大,如果只有一个模块来维护数据,那么这个模块会非常大,

对于可维护性来说就不是特别高,所以vuex给我们提供了模块的功能

我们可以通过modules来将vuex处理为多个模块

1. 定义Store中的模块

说明:

1. 通过store中的modules选项定义模块
2. 每个模块都有自己的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

说明:

1. $store就是Store仓库
2. state获取state数据
3. goods为modules中的模块名称
4. fruits为模块goods中state数据

2.2 获取getter计算属性

$store.getters.filterFruits

注意:

1. store中getters的计算属性不能和模块中的getters计算属性重名
2. 如果重名,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
})