How to write modules in TypeScript VUEX?

Question

typescript

Good afternoon! Help me figure out how to work with VUEX when using Typescript?

I saw a lot of techniques and several libraries for decorators and classes on the Internet (I know about support in VUE3 and VUEX4).

At the moment I am working in this way

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

In this solution, I don't like that TS can't check for a state or action in the vuex module, for example:

@vdpStore.State
    private lessonMetricsData!: string;

    @vdpStore.State
    private loading!: boolean;

Or please show reference turnip using vuex nuxt and TS

Answer 1

Try the " vuex-class-modules" library . The modules fit perfectly. The peculiarity of this lib is that $store can be passed to the module constructor right inside the component, thereby registering the module not at compile time through the decorator, as in other solutions, but at runtime (which can be important when working in SSR mode, where store is created by calling the createStore(); function before mounting the root Vue instance).

<!-- 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>

Module file:

// 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);
  }
}

A much more popular library is " vuex-module-decorators ", which also has a similar principle to the one described above and is compatible with SSR. An example can be found here .