Ответы пользователя по тегу TypeScript
  • Как правильно писать на TypeScript VUEX модули?

    @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. Пример можно найти здесь.
    Ответ написан
    5 комментариев