How can I add a submodule for a Module in vuex-module-decorators?

[lixingjuan]

No description provided.

[lixingjuan]

`
@module({
name: 'Son',
dynamic: true,
namespaced: true,
store,
})
class Son extends VuexModule {
/* 分页信息 当前页 */
public pageIndex = 1;
}

@module({
name: 'Father',
dynamic: true,
namespaced: true,
store,
})
class Father extends VuexModule {
modules = {
Son: getModule(Son),
};
}
`

I want the Son to be Father's Module, but I got the error

[llllllllllx]

// Son.ts
@module({
    name: 'Son',
    namespaced: true,
})
export class Son extends VuexModule {
    public pageIndex = 1;
}

// Father.ts
import Son from 'Son.ts'

@module({
    name: 'Father',
    dynamic: true,
    namespaced: true,
    store,
})
class Father extends VuexModule {
    modules: {
        Son: Son,
    };
}

[Murali-codes]

I came across similar use case recently , below is the way i have implemented

@Module({namespaced: true, name: 'father'})
  class Parent extends VuexModule{}

@Module({namespaced; true, name: 'parent/child'})
class Child extends VuexModule{}


//in .vue component

 $store.registerModule('parent', Parent);
 $store.registerModule(['parent', 'child'], Child)

Not sure if this is the best way , but its the only way i found so far. I didn't try wrt dynamic modules

[steven87vt]

For this to work, the @Module({ name: 'some/path' }) option has to be updated to support an array name: ['some', 'path']. Internally, after this framework hands the module off to Vuex store.registerModule, vuex first converts the string to an array anyways.

The problem comes into play when fetching the module using getModule(any) as it calls genStatic(store) which is not overridable in the decorator handler:

call:

vuex-module-decorators/src/vuexmodule.ts

Line 64 in 115c24a

const storeModule = genStatic(store)

defined:

vuex-module-decorators/src/module/index.ts

Line 76 in 115c24a

Object.defineProperty(constructor, '_genStatic', {

So even though when you force the name: [] array input in the decorator, using // @ts-ignore to get around the compiler error, the dynamic getModule cannot handle an array name type (which the following lines depend on anyways).

@championswimmer hope this issue gets updated in your next release. it might be sufficient to just change the module name option from name: string to name: string[] and handle the paths this way since internally the vuex framework is using [].reduce to isolate modules within the store:

function getNestedState (state, path) {
  return path.reduce(function (state, key) { return state[key]; }, state)
}