Extends VuexModule fails

[sneko]

Hi @championswimmer 😃

I'm putting logger and api client instances in my global state because I want to use them in almost all my store modules.

To avoid using each time this.rootState.logger.debug('blabla') I'm trying to make all my modules herited from a EnrichedVuexModule as follow:

export class EnrichedVuexModule extends VuexModule {
    public test(): string {
        return "heyyyy";
    }

    get $api() {
        return store.state.apiClient;
    }

    get $log() {
        return store.state.logger;
    }
};

And my modules are defined with the following:

@Module({ dynamic: true, store, name: 'authentication' })
export class Authentication extends EnrichedVuexModule {

My TypeScript "linter" detects that this.$api and this.$log exist due to the inheritance but at runtime this.$api and this.$log are not defined (while I can reach them through this.rootState.XXX). Same for the test() function.

Since I'm using dynamic modules and that some stuff is made with decorators by your package, do you know what could cause this trouble please?

Thank you,

[sneko]

BTW, this.rootState is only accessible at runtime and is not defined while coding the module. Is there an official way to access it without doing (this as any).rootState?

[championswimmer]

The rootState can be added to the type defintion. Double inheritance is something I didn't keep in mind when working this out. I neeed to change how the decorator works for that to happen, I'll take a look at this.

[sneko]

@championswimmer or maybe do you have another suggestion to implement shared variables between my components that would fit better the Vuex pattern?

I could create a "rootModule" that I would inject in another module through getModule(). But I would still be required to pass through an intermediate variable (utils in this example):

@Module({ dynamic: true, store, name: 'authentication' })
export class Authentication extends VuexModule {
  protected utils = getModule(RootModule.prototype);

  @Action
	public async aaaaa() {
		return this.utils.api.callSomething();

[championswimmer]

mixin-type usage in vuex modules were never part of the design, even in default js-based vuex usage. if you want common features, create a separate common module for that maybe

[sneko]

I've just implemented a module and I need to declare variables outside (and before) the module definiton since all the this.PROPERTY are not kept at runtime:

const { $api, $log } = getModule(Utilities.prototype).object;

@Module({ dynamic: true, store, name: 'authentication' })
export class Authentication extends VuexModule {

I'm not confident about the cleanliness of this way of doing but... it works 😄

Thank you for your answers,