constructor vuex - module about vuex-module-decorators

[championswimmer]

There you go

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

[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.

[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..

[chantouchsek]

you can do it like:

constructor(proxy: BaseProxy, module: Mod<ThisType<{}>, any> = {}) {
    super(module)
    this.proxy = proxy
}

But NuxtJS store will raise this:

Cannot stringify arbitrary non-POJOs ........