Vuex的使用（十一）——module的定义和用法

以你之姓@ 2022-09-11 06:19 172阅读 0赞

参考文档：https://vuex.vuejs.org/zh/guide/

在前面的文章里介绍actions时提到我们可以把actions的定义部分从Vuex拆出来，从而避免Vuex定义文件的过度膨胀，这可以视为从功能角度拆分Vuex。但实际项目开发中更常见的情况是需要从业务角度来拆分Vuex，如希望某一功能模块可以共享一份state、getters、mutations和actions，这时就轮到module上场了。

首先定义一个module（新增文件路径为src\\store\\moduleA\\index.js），代码如下：

export default { 
        namespaced: true,
        state: { 
            param1: "param1",
            param2: "param2"
        },
        getters: { 
            getter1: state => { 
                return `new ${ state.param1}`;
            },
            getter2: (state, getters) => { 
                return `param1 is ${ state.param1} getter1 is ${ getters.getter1}`;
            }
        },
        mutations: { 
            mutationA: (state, add) => { 
                state.param2 += add;
            }
        },
        actions: { 
            actionA: () => { 
                console.log("enter action");
            },
            actionB: (context, callback = null) => { 
                console.log(context.state.param1);
                console.log(context.getters.getter1);
                context.commit("mutationA", " add somedata");
                context.dispatch("actionA");
                typeof callback === "function" && callback();
            },
            // 上下两种写法等价
            actionC: ({ state, getters, commit, dispatch}, callback = null) => { 
                console.log(state.param1);
                console.log(getters.getter1);
                commit("mutationA", " add somedata");
                dispatch("actionA");
                typeof callback === "function" && callback();
            }
        }
    };

然后在Vuex中引入并声明modules（修改文件路径为src\\store\\index.js），代码如下：

import Vue from "vue";
    import Vuex from "vuex";
    
    import moduleA from "./moduleA";
    import action from "./action";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
        state: { 
            param1: "state param",
            paramArray: [1, 2, 3]
        },
        getters: { 
            param2: state => { 
                return `new ${ state.param1}`;
            },
            // 在getters中可以使用其他getters
            param3: (state, getters) => { 
                return `another ${ getters.param2}`;
            },
            // getter支持返回一个函数
            param4: state => index => { 
                return state.paramArray[index];
            }
        },
        // mutations不支持相互调用（如下面的mutation1不能调用mutation2）
        mutations: { 
            mutation: () => { 
                console.log("enter mutation");
            },
            mutation1: state => { 
                // 在mutations的回调函数内可以修改state的值
                state.param1 += " add something";
            },
            // mutations支持传递参数（第二个参数）
            mutation2: (state, addString) => { 
                state.param1 += addString;
            },
            /** * Vuex不允许mutations返回任何信息，但如果我们声明返回的是一个promise， * 虽然在调用处无法获取到promise对象，但这个promise仍可以执行 */
            mutation3: () => { 
                return new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        console.log("1000ms pass");
                        resolve();
                    }, 1000);
                })
            }
        },
        actions: action,
        modules: { 
            moduleA
        }
    });
    
    export default store;

接下来在组件中声明并调用modules中的信息（注意在声明时第一个参数是module的名称，新增文件路径为src\\components\\componentK.vue），代码如下：

<template>
        <div>
            <span>module的应用</span>
        </div>
    </template>
    
    <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; export default { name: "component-k", computed: { ...mapState("moduleA", ["param1", "param2"]), ...mapGetters("moduleA", ["getter1", "getter2"]) }, methods: { ...mapMutations("moduleA", ["mutationA"]), ...mapActions("moduleA", ["actionB", "actionC"]), printFunc() { console.log("callback func"); } }, created() { console.log(`param1 is ${ this.param1}`); console.log(`param2 is ${ this.param2}`); console.log(`getter1 is ${ this.getter1}`); console.log(`getter2 is ${ this.getter2}`); this.mutationA(" from component-k"); console.log(`param2 is ${ this.param2}`); this.actionB(this.printFunc); this.actionC(this.printFunc); } }; </script>
    
    <style scoped> </style>

页面运行后可以看到module中的state和getters都可以正常引用，且mutations和actions也可以正常调用。