BonBonSlick
@BonBonSlick
Junior Web Developer Trainee

Vue + Typescript коллизия названий для action / getter из разных неймспейсов, или как решить Duplicate identifier?

const namespaceRegister = `${FORMS}/${FORM_REGISTER}`;
const namespaceVerifyCode = `${FORMS}/${FORM_VERIFY_CODE}`;

export default class RegisterForm extends Vue implements IRegistrationForm, IVerifyCodeForm  {
    @namespace(namespaceVerifyCode).Getter
    isSending!: boolean;
    @namespace(namespaceRegister).Getter
    isSending!: boolean;


Понятно дело что неймспейсы прописаны для каждого модуля
import state     from './state';
import mutations from './mutations';
import actions   from './actions';
import getters   from './getters';

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions,
};


Но модуль формы екстендит абстрактный модуль, то есть все формы имеют какие-то одинаковые поля, геттеры, екшены.
И как тогда их использовать в одном шаблоне?

[tsl] ERROR in /var/www/test/src/components/public/not_secured/partials/forms/register/RegisterForm.ts(67,5)
      TS2300: Duplicate identifier 'isSending'.


В TS должно быть что-то для резолва коллизий имен из разных неймспейсов по типу isSending as isVerifyCodeSending!: boolean;
  • Вопрос задан
  • 74 просмотра
Решения вопроса 2
Aetae
@Aetae
Тлен
Декораторы декорируют уже готовый объект, после его создания, а не в процессе.
Твой код, если бы работал, равносилен по логике этому:
export default class RegisterForm extends Vue implements IRegistrationForm, IVerifyCodeForm  {
    @namespace(namespaceRegister).Getter
    @namespace(namespaceVerifyCode).Getter
    isSending!: boolean;

Если тебя это устраивает - так и пиши. Нет - придумай что-то ещё.

В инстансе класса(объекте) не может быть два одинаковых поля, хранящих одновременно разные значения. Логично же, нет?



Насколько я могу судить, запись
@namespace(<vuex-path>).Getter
    isSending!: boolean;

Означает - при получения поля isSending мы запрашиваем поле из vuex по адресу <vuex-path>, при установке поле isSending - мы коммитим поле в vuex по адресу <vuex-path>.
Если одно поле у тебя устанавливает и получает одновременно два значения в vuex - смотри выше, хотя по хорошему такое лучше объединять в mutation и хз, предусмотрена ли этой либой такая дичь . Если же это должны быть два отдельных значения, то КАК ты себе это представляешь?
Ответ написан
BonBonSlick
@BonBonSlick Автор вопроса
Junior Web Developer Trainee
Единственный вариант к которому пока пришел, это добавить новое поле
_isVerifyCodeSending?: boolean;

И перезаписать все екшены, геттеры и мутации абстрактного модуля. пример
import common from '@/store/module/abstract/form/getters';

export interface IVerifyCodeGetters {
    //@todo - workaround when 2 forms present on the same component they have action / getter names collisions
    isVerifyCodeSending?: boolean;
}
const local   = {
      //@todo - workaround when 2 forms present on the same component they have action / getter names collisions
  currentVerifyCodeSecsLeft: (state: any): number => state._currentVerifyCodeSecsLeft,
};
const getters = {...common, ...local};

export default getters;

@namespace(namespaceVerifyCode).Getter
    isVerifyCodeSending!: boolean;


Скажу сразу, пакеты vuex + ts вообще не позволяют расширять другие Vuex классы, модули. Посему только функциональщина.
Типы Typescript в vuex без декораторов работают только для IDE typehint, после компиляции тип может быть any

Если кто знает как можно иначе решить коллизию имен в Class component, буду признателен.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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