[Feature Request] Vuex Child Modules Functionality (Submodules)

[onkarj422]

Is there any kind of provision to have sub modules inside of a module?

Like in the original Vuex we have

const ModuleA {
    state: {...},
    mutations: {...},
    actions: {...},
    modules: {
        subA: ModuleSubA
    }
}

In vuex-class-modules, maybe something like this

class ModuleA {
    subA = createSubModule(ModuleSubA);
}

Please, specify if something like that already exists, or any workaround would also work

[bodograumann]

I fail to see what the use case for this is. Maybe you can explain what you are trying to achieve.

We register the modules through store.registerModule (https://github.com/gertqin/vuex-class-modules/blob/master/src/module-factory.ts#L178) or store.hotUpdate (https://github.com/gertqin/vuex-class-modules/blob/master/src/module-factory.ts#L169). In the former case it would be a simple to change to allow not only string names for the registration name, but also arrays of strings, which would lead to submodule registration. In the latter case we probably need to build a structure for the parent modules. Not sure what we need to provide for them exactly.

[gertqin]

I agree with @bodograumann - I have also never had the need for submodules. Why can't it just be a another regular module?

[onkarj422]

I agree with @bodograumann - I have also never had the need for submodules. Why can't it just be a another regular module?

Dynamic registration becomes pretty efficient when used along with nested modules.

Consider this example hierarchy in a particular domain -

- GlobalModule
    -UserModule
    -InputModule
        -OutputModule
            -ReportsModule

So here, the bottom most module ReportsModule is depended on OutputModule which in turn is depended on InputModule. Now, in my components, the InputModule and the whole InputComponent view tree by which it is consumed will be dynamically registered and dynamically rendered based on some condition. In this case, registering InputModule dynamically, will in turn make its nested modules also dynamic.

But, in a non-hierarchical structure,

- GlobalModule
- UserModule
- InputModule
- OutputModule
- ReportsModule

In this case, while registering InputModule based on some condition you will have to specify those other two modules Output & ReportsModule explicitly.

What do you guys think? @bodograumann @gertqin

[bodograumann]

So basically you want to automatically load other modules when a “parent”-module is loaded into the store.

I guess that is not impossible to implement, but there doesn't seem to be any easy way of implementing it, that works with the rest of vuex-class-modules. It is probably not worth the effort.

Especially as you can quite easily implement it on your side. You will anyway have to register the module somehow. const inputModule = new InputModule({ store, name: "user" }); So at that point you can also wrap it in a function and register the other modules.

function registerInputModule() {
    return {
        inputModule: new InputModule({ store, name: "user" }),
        outputModule: new OutputModule({ store, name: "user" }),
        reportModule: new ReportModule({ store, name: "user" }),
    }
}