Vuex-module-decorators: Impossible to extend module, class

Created on 7 Jun 2020  路  7Comments  路  Source: championswimmer/vuex-module-decorators

export default abstract class AbstractForm extends VuexModule implements IAbstractForm {
    _fields = {};

    get fields(): { [key: string]: string } {
        return this._fields;
    }
...
@Module({namespaced: true})
export default class SearchForm extends AbstractForm implements ISearchForm {
    /** @override **/
    _fields                = {
        searchValue: ''
    };

@Template
@Component<SearchForm>
export default class SearchForm extends Vue implements ISearchForm, IAbstractForm {
    @namespace(searchFormNamespace).Getter
    fields!: any;


    mounted() {
        console.log(this.fields);
    }

error
[vuex] unknown getter: FORMS/FORM_SEARCH/fields

Extended only .State, but actions and getters, mutations not shared, extended

If we declare @Module for child class, child does not inherit methods from parent class. If we declare modules for both classes, child and parent, child class has no it is state fields, but we have both classes methods :/

We need a way to extend modules or some way to share common features across classes. Writing duplicated code for every module is to heavy to maintain.

Most helpful comment

I strongly suggest to remove this package and never use it, because it can not be extended without core modification.
Tried TS extend, implement, mixins (2 ways, copy with prototyping and extending constructor with decorator), decorators, state factory, dynamic loading.

Maybe, it is awesome if you have 1-2 states, bur reality is, we have more then 25+ modules, most of projects also require extending or share common functionalities. Seems impossible to do without some tricky stuff or messing a lot.

I lost a lot of time, because most of Vue + TS shitty guides use this package. Seems like everyone except me works with small projects with 1-2 pages or do not want to share their tricks with community.
I will have now to redo vuex to old way I used before.

All 7 comments

I do not understand what this package for if it is not possible to extend module functionality

Every one of 39 000+ people downloading this package per week, how you extend your modules?

I am using helper functions for every module. You may need to move your logic from vuexmodules to another class(-es) and use store only as pure store.

@bachinskiyv but in the access store directly in the template, eg

    @namespace(FORM).Action
    submitForm!:(url : sting) => void; // in action logic, like validation, etc

if we call it from somewhere else, another helper class or method, what sense of using classes at all? Why not go for simple functions like here https://github.com/SimonZhangITer/vue-typescript-dpapp-demo/tree/master/src/store

Mixins also do not work

export default function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(mixin => {
        Object.getOwnPropertyNames(mixin.prototype).forEach(name => {
            Object.defineProperty(
                derivedCtor.prototype,
                name,
                Object.getOwnPropertyDescriptor(mixin.prototype, name) as any
            );
        });
    });
}


from docs

@Module({namespaced: true})
export default class LoginForm extends AbstractForm {

}

applyMixins(LoginForm, [AbstractForm]);

All getters are missing. Mapped only .State and .Actions :/

This package seems useles to me, becuse we can not extend functionality nor share it.

I strongly suggest to remove this package and never use it, because it can not be extended without core modification.
Tried TS extend, implement, mixins (2 ways, copy with prototyping and extending constructor with decorator), decorators, state factory, dynamic loading.

Maybe, it is awesome if you have 1-2 states, bur reality is, we have more then 25+ modules, most of projects also require extending or share common functionalities. Seems impossible to do without some tricky stuff or messing a lot.

I lost a lot of time, because most of Vue + TS shitty guides use this package. Seems like everyone except me works with small projects with 1-2 pages or do not want to share their tricks with community.
I will have now to redo vuex to old way I used before.

Guess i learned a lesson from this aswell, never use a package without seeing the open issues first.

I started to use this in my work, seemed fine until i had to work with inheritance, getters not working, state not getting properly mapped and now i found a bug with namespaced modules, this package is a unmaintained waste of time.

The author knows inheritance is broken and doesnt even mention it in the docs, tricking us to waste time with this package until we inevitably drop it

Was this page helpful?
0 / 5 - 0 ratings