Vuex-module-decorators: constructor vuex - module

[kwekujoe]

I am trying to inject my class which extends VuexModule using a DI container based on inversifyjs.

I Would have to pass the VuexModule constructor to the DI container then inject it when the class is instantiated to be passed to super().

It would be helpful if you could provide an example of :

/*

• To use with new VuexModule(<ModuleOptions>{}) syntax

  */

cheers.

[championswimmer]

sure will add an example for this

[kwekujoe]

Hi , I made another attempt.
heres my store code...

export const mod = <ModuleOptions>{name:"su-data",namespaced:true,stateFactory:false};
const _service = DIContainer.get<SvcServiceUser>(IOC_TYPES.SU_SERVICE);
const suData = new ServiceUserData(_service,mod)

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  modules: {
    suData
  },
})

heres my code for my VuexModule constructor

@Module
 export class ServiceUserData extends VuexModule {
    private _service : SvcServiceUser;

    constructor( 
              service: SvcServiceUser,
               module: Mod<ThisType<{}>,any>
               )

   {
    super(module)

and finally this is the error

Uncaught TypeError: Cannot read property 'actions' of undefined
    at new VuexModule (vuexmodule.js?84ac:5)
    at new ServiceUserData (data-service-user.ts?18e2:43)
    at stateFactory (module.js?f71e:7)
    at eval (module.js?f71e:19)
    at Module (module.js?f71e:43)
    at DecorateConstructor (Reflect.js?8e39:541)
    at Object.decorate (Reflect.js?8e39:130)
    at Module.__decorate (tslib.es6.js?d2cb:53)
    at eval (data-service-user.ts?18e2:26)

highlighting module.actions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VuexModule = /** @class */ (function () {
    function VuexModule(module) {
        this.actions = module.actions;
        this.mutations = module.mutations;
        this.state = module.state;
        this.getters = module.getters;
        this.namespaced = module.namespaced;
        this.modules = module.modules;
    }
    return VuexModule;
}());
exports.VuexModule = VuexModule;
//# sourceMappingURL=vuexmodule.js.map

Obviously there problem in the constructor and the manner in which (module) is constructed. Any suggestions will be helpful, I think what you done here is great

thanks..

[championswimmer]

There you go

https://github.com/championswimmer/vuex-module-decorators/blob/master/test/vuexmodule_constructor.ts

[orgertot]

@championswimmer this example is just wrong and answers nothing.

What do I have to provide in the super call inside the constructor?

[gregveres]

@orgertot
I believe the answer you were looking for was provided here on issue #105. The answer from @championswimmer was that you shouldn't be using the constructor syntax of typescript for your Modules. I find that answer very unsatisfactory since that is our style guide - we do all of our initialization inside constructors and then we unit test the constructor setup the class properly.

I think that @championswimmer answered your question with his example of how he would do unit testing on a store module, by creating the store, then sending it messages. That's not really how I would prefer to test my modules, but if you can't instantiate them, then I guess that is the best we can do.

I know your original question was a long time ago and you have probably found another way around this. I am just migrating to vue from another framework where we have lots of existing typescript code that is all unit tested. I am just trying to figure out the best way to do the migration.