Как правильно писать на TypeScript VUEX модули?

Question

[vaflya]

Как работать с VUEX, когда используешь Typescript?

В интернете видел множество методик и несколько библиотек для декораторов и классов (про поддержку в VUE3 и VUEX4 знаю).

В данный момент я работаю таким методом:

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import { namespace } from 'vuex-class';
import Navigation from '@/components/Navigation.vue';
import EmotionsPalette from '@/components/emotions-palette/index.vue';

const vdpStore = namespace('vdp');

@Component({
    components: {
        Navigation,
        EmotionsPalette,
    },
})
export default class VDPIndexPage extends Vue {
    // Ссылка на файл с видеоуроком
    private videoLessonSRC!: 'http://localhost:3000/webinar.mp4';
    private groups!: {
        a: 'ege_11_onl_group_soc_normal_max_w1_050919_558_ku_web';
    };

    @vdpStore.State
    private lessonMetricsData!: string;

    @vdpStore.State
    private loading!: boolean;

    @vdpStore.Action
    public getProcessedDataResult!: () => void;

    mounted() {
        this.getProcessedDataResult();
    }

    /**
     * Установить указаное время в видео плеере
     * @param timeCode - новое значение времени
     */
    setTimeVideoPlayer(timeCode: number) {
        // @ts-ignore
        document.getElementById('vid1').currentTime = timeCode - 5;
        console.log('Новое время', timeCode);
    }

    /**
     * Приводит время в секундах к формату HH:MM:SS
     * @param {String} timeSeconds - время в секундах
     */
    formatTime(timeSeconds: string) {
        const sec_num = parseInt(timeSeconds, 10);
        let hours = Math.floor(sec_num / 3600);
        let minutes = Math.floor((sec_num - hours * 3600) / 60);
        let seconds = sec_num - hours * 3600 - minutes * 60;

        if (hours < 10) {
            hours = '0' + hours;
        }
        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }
        return hours + ':' + minutes + ':' + seconds;
    }
}
</script>

В данном решении, мне не нравится, что TS не может проверить наличие состояния или экшена в модуле vuex, к примеру:

@vdpStore.State
    private lessonMetricsData!: string;

    @vdpStore.State
    private loading!: boolean;

Или покажите пожалуйста эталонную репу с использованием vuex nuxt и TS.

Comments

[twoone]

А как по вашему на этапе компиляции можно проверить то что ВОЗМОЖНО будет вычисленно в момент исполнения?

[vaflya]

twoone, честно, не понимаю. Прихожу ко мнению, что ts в vue бесполезен по большому счету

[twoone]

vaflya, это ваше мнение, переубеждать не буду.

[Aetae]

Конкретно с Vue ts - ещё туда-сюда, после допила и костылей. А вот Vuex - да, на ts ложится очень плохо, какой вариант ни выбери.

[vaflya]

Aetae, https://kirillurgant.com/notes/vuex_typescript

вот этот присмотрел

[vaflya]

twoone, я был не прав. Извините.

[Aetae]

vaflya, это стандартный подход предлагаемый vuex. Никакого толком type safety и куча мусорного boilerplate. Лучше уж юзайте предложенное Arsync.

[Arsync]

vaflya, типизацию к этой штуке прикручивают под Vuex 4 - там нужно будет вручную в обязательном порядке прописывать $store на Vue через shim, типизированный под свой тип состояния. Пока не ясно, как это будет работать с динамическими модулями.

Answer 1

[Arsync]

Попробуйте библиотеку "vuex-class-modules". Модули ложатся идеально. Особенность именно этой либы в том, что $store можно передать в конструктор модуля прямо внутри компонента, тем самым зарегистрировав модуль не во время компиляции через декоратор как в других решениях, а на этапе выполнения (что может оказаться важным при работе в режиме SSR, где store создаётся вызовом функции createStore(); до монтирования корневого инстанса Vue).

<!-- App.vue -->
<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script lang="ts">
import { ExampleModule } from 'src/store/module-example';

export default {
  name: 'App',

  created() {
    const myModule = new ExampleModule({ store: this.$store, name: 'example'});

    myModule.setProp(false); // Mutation calling;

    myModule.confirmProp(); // Action calling
  }
};
</script>

Файл модуля:

// src/store/module-example/index.ts
import {
  VuexModule, Module, Mutation, Action
} from 'vuex-class-modules';

@Module
export class ExampleModule extends VuexModule {
  prop: boolean = false;

  @Mutation
  setProp(payload: boolean) {
    this.prop = payload;
  }

  @Action
  confirmProp() {
    this.setProp(true);
  }
}

Гораздо более популярная библиотека - "vuex-module-decorators", в ней тоже есть принцип, похожий на описанный выше и совместимый с SSR. Пример можно найти здесь.

Comments

[vaflya]

спасибо!

[vaflya]

Вопрос еще, для работы с типами в компонентах, указанными во vuex их нужно выносить?
Типа корневой директории entities / types?

[Arsync]

vaflya, типы конкретного модуля можно помещать в 'src/store/module-name/types.ts', а затем экспортировать "транзитом" через файл 'src/store/module-name/index.ts' туда, где предполагается с ними работать. Но если они используются только в качестве возвращаемого значения, либо применяется деконструкция, то TypeScript прекрасно их читает во внешних компонентах и без импортирования.

// src/store/module-name/types.ts
export interface IDepartment {
    id: number,
    name: string,
    shortName?: string;
}

// src/store/module-name/index.ts
import { IDepartment } from './types'; // Для работы с типом в модуле
export { IDepartment } // Для возможности импорта из файла модуля по типу from 'src/module-name'

Другой подход - когда есть некоторое API на сервере и утилита вроде NSwag, по мета-описанию API генерящая клиент для взаимодействия с этим API. В этом случае она сама кидает все сущности в автогенерируемый файл, из которого их можно использовать. Пример из реального проекта, сгенерированная сущность имеет приписку 'Dto' (Data Transfer Object):

import { EmployeesService, EmployeeProfileDto } from 'src/services';

[vaflya]

Arsync, если Вас не затруднит, подскажите как нормально вынести api (nuxt+axios+ts)?
раньше на js выносил в отдельную папку @/src/api

Теперь с типами путаница, пробежался по всему гит хабу. Или лучше использовать не API а сервисы?

[Arsync]

vaflya, это лучше оформить отдельным вопросом, поскольку лично я использую автогенерацию клиентских сервисов на основе WebAPI, оно сильно отличается от связки nuxt + axios. У меня бэкенд .NET Core - в конфиге для Nswag прописал генерить всё в 'src/services', оттуда и беру. Сделал отдельный ServiceFactory, который подсовывает в создаваемые сервисы AxiosInstance с настроенным интерцептором для добавления Bearer токена в запрос.