BonBonSlick
@BonBonSlick
Junior Web Developer Trainee

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) {

Стоит добавить геттер в миксин, почему то падают модули стилей во всех шаблонах которые используют миксин AuthenticationMixin с чем ето может быть связано?

[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']);
    }

Но стоит убрать getter как стили работают везде как надо.

Стили ломает конкретный vuex модуль в миксине, более того, ломает только если использовать декоратор геттеров.

Потратил часов 8 на то что бы попытаться выяснить где, почему так, но задебажить это крайне сложно, где и в какой момент затирает параметр который даже если вручную забиндить,
то есть в компоненте прописать $style : any = ['test']; все-равно будет выдавать ошибку,
потому что $style какого-то лешего будет удален, словно при исопльзование декоратора .Getter где то на этапе инжекта динамического значения это поле намеренно удаляется,
это так же относится и к другим полям, к примеру $test : any = 'test'; будет так же удалено.

ошибка скорее всего в node_modules/vuex-class/lib/bindings.d.ts
где то не так происходит резов, инжекты или сборка

Дело в шине TS, декораторе, vue augmentation и vue-decorator аугментирует и потом еще mixins() конфликтируя тем самым затирая все другие параметры. Дебажить как ето хз, ковыряя исходнкик мало что понятно, а брекпоинты в соурс мап ... бесполезны, это на этапе компиляции , сборки затерает.
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы