B
B
BonBon Slick2021-09-29 00:47:16
Vue.js
BonBon Slick, 2021-09-29 00:47:16

Vue typescript mixins() vuex.getter breaks $styles?

https://github.com/vuejs/vue-class-component/issues/566

'use strict';
import {Component, Vue}    from 'vue-property-decorator';
import {Getter, namespace} from 'vuex-class';
import {AUTH}              from '@/store';
import {IAuthenticate}  from '@/store/module/common/auth/actions';
import {IAuth}          from '@/store/module/common/auth/state';

const moduleAuth = namespace(AUTH);

@Component
export default class AuthenticationMixin extends Vue implements IAuth {
    // @namespace(AUTH).Getter
    // @Getter('roles', { namespace: AUTH })
    @moduleAuth.Getter
    isAuthenticating!: boolean;
 
    authenticateAnon!: () => Promise<any>;
}
export default class Menu extends mixins(LoadingModalScreenMixin, AuthenticationMixin) {

It is worth adding a getter to the mixin, for some reason the style modules fall in all templates that use the AuthenticationMixin mixin. What could be the reason for this?

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'test')"

found in

---> <Menu>
       <LayoutDefault>
         <Root>
mounted(): void {
        console.info(this);
        console.info(this.$style);
        console.info(this.$style['test']);
    }

But it's worth removing the getter as styles work everywhere as they should.

Styles breaks a specific vuex module in the mixin, moreover, it only breaks if you use the getter decorator.

I spent 8 hours trying to find out where, why, but it is extremely difficult to debug, where and at what moment it overwrites a parameter that even if manually bound,
that is, write $style : any = ['test']; it will still throw an error,
because the $style of some devil will be removed, as if using the .Getter decorator somewhere at the stage of injecting a dynamic value, this field is intentionally removed,
this also applies to other fields, for example $ test : any = 'test'; will also be removed.

the error is most likely in node_modules/vuex-class/lib/bindings.d.ts
cuts, injections or assembly happen somewhere.

The point is in the TS bus, decorator, vue augmentation and vue-decorator augments and then another mixins () conflicting, thereby overwriting all other parameters. Debugging like this xs, picking the source is little clear, and the breakpoints in the source map ... are useless, this is at the compilation stage, the assembly will be lost.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question