Vuex-module-decorators: getModule when using stateFactory and reusing module?

Created on 1 Oct 2019  路  1Comment  路  Source: championswimmer/vuex-module-decorators

I have a usecase similar to the state_factory_state_isolation.ts test where I am reusing the same module with a few different names

@Module({ stateFactory: true, namespaced: true })
class FactoryModule extends VuexModule {
  wheels = 2

  @Mutation
  incrWheels(extra: number) {
    this.wheels += extra
  }

  get axles() {
    return this.wheels / 2
  }
}

const store = new Vuex.Store({
  modules: {
    factoryModA: FactoryModule,
    factoryModB: FactoryModule,

  }
})

Is there any way I can use getModule in order to leverage type safety? I've tried combing the documentation and the other issues here but, unless I missed something, I didn't see any previous solutions.

Most helpful comment

I think I may have overcome this issue by making the store dynamic and wrapping it in a function that creates the module

import {store} from "./index";

export function createModule(name: string) {
  @Module({ dynamic: true, name, store, namespaced: true })
  class FactoryModule extends VuexModule {
    // ...
  }

  return getModule(FactoryModule);
}

But that makes it a little awkward because the FactoryModule type isn't directly exported and in my components I have to write

@Component
export default class MyComp extends Vue {

  $module: ReturnType<typeof createModule>;

  created() {
    this.$module = createModule('factoryModA');
  }
}

It would be ideal if we could defer generating statics until getModule is called and allowing to pass in a name with that function

e.g.,

import {store} from "./index";

@Module({ dynamic: true, deferRegistration: true, namespaced: true })
class FactoryModule extends VuexModule {
  // ...
}
@Component
export default class MyComp extends Vue {

  $module: FactoryModule;

  created() {
    this.$module = getModule(FactoryModule, store, 'factoryModA');
  }
}

>All comments

I think I may have overcome this issue by making the store dynamic and wrapping it in a function that creates the module

import {store} from "./index";

export function createModule(name: string) {
  @Module({ dynamic: true, name, store, namespaced: true })
  class FactoryModule extends VuexModule {
    // ...
  }

  return getModule(FactoryModule);
}

But that makes it a little awkward because the FactoryModule type isn't directly exported and in my components I have to write

@Component
export default class MyComp extends Vue {

  $module: ReturnType<typeof createModule>;

  created() {
    this.$module = createModule('factoryModA');
  }
}

It would be ideal if we could defer generating statics until getModule is called and allowing to pass in a name with that function

e.g.,

import {store} from "./index";

@Module({ dynamic: true, deferRegistration: true, namespaced: true })
class FactoryModule extends VuexModule {
  // ...
}
@Component
export default class MyComp extends Vue {

  $module: FactoryModule;

  created() {
    this.$module = getModule(FactoryModule, store, 'factoryModA');
  }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

erathorus picture erathorus  路  5Comments

blackmad picture blackmad  路  4Comments

Leandro-Albano picture Leandro-Albano  路  3Comments

blainehansen picture blainehansen  路  4Comments

cyberflohr picture cyberflohr  路  4Comments