Handle dynamic vuex stores

[oppianmatt]

When combined with a dynamic store registration as described by the vuex docs, the decorators fail as they try use the store before it exists.

[jacklp]

In your component write:

public created() { if (!this.$store.state.yourModuleName) this.$store.registerModule('[yourModuleName', yourModuleName) }

[oppianmatt]

Yes that's to register. But when I create a decorator binding to something in that store I get an error that the module name space is undefined.

[jacklp]

@Getter('yourModuleName/yourGetterName') VariableName

[dTalion]

I have registered dynamic every order in the store and using their id as a namespace.

I am doing something like:

const orderStore = namespace("orderStore");

@Component export default class COrder extends Vue { @Prop({ type: Number, default: 0 }) private orderId!: number; @orderStore.State(function(this: COrder , s) { return s[this.orderId]; }) private order!: IOrder; }

is there any better way to do it?

[stuft2]

The binding to the Getters is not done properly when registering vuex stores dynamically with registerModule. The Getters throw an error: [vuex] module namespace not found in mapGetters(): person-lookup/.

Registering the vuex store in the beforeCreate lifecycle hook works just fine:

  beforeCreate () {
    if (!this.$store.state['person-lookup']) {
      this.$store.registerModule('person-lookup', PersonLookupModule)
    }
  }

The problem isn't that the store isn't registered, it just doesn't register properly. I'm still not sure exactly what is happening but my Vue DevTools plugin shows the getters are mapped to the root state but the state is properly namespaced.

[stuft2]

@oppianmatt the work around is to register your module sometime before the mount lifecycle (i.e. created, beforeCreate) and try to use the getters using @Getter instead of @myNamespace.Getter. That mostly works... There are a few caveats.

[stuft2]

@ktsn I'm not seeing much activity on this repo since last year. Are you planning to maintain this code base?

[zhangbing3]

You can call getModule or registerModule to register vuex module dynamically when the route is loaded use 'vuex-module-decorators' dynamic: true @Module({ name: 'user', namespaced: true, store, dynamic: true }) export class User extends VuexModule implements IUserState { public userProfile = {} public roles: string[] = [] public loading: boolean = false }

router config: { path: '/login', component: async () => { // 动态加载vuex模块和路由对应的组件 getModule((await import('../store/modules/user')).User) return import(/* webpackChunkName: "login" */ '../views/login/index.vue') } }