Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (2)

Лучшие ответы пользователя

Все ответы (2)
  • Как правильно писать на 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. Пример можно найти здесь.
    Ответ написан
  • Где принято размещать функции проверки наличия авторизации пользователя в приложении при его старте, на примере vue cli?

    @Arsync
    В навигационных хуках роутера (vue-router). Любая навигация по приложению, включая начальную страницу, проходит через роутер (если он используется). И там есть beforeEach((to, from, next) => {}), который можно сделать асинхронным. Этот хук способен блокировать открытие целевой страницы. Если маршрут не авторизован, вызываешь next с указанием вместо запрошенного пути страницы входа. Более того, раз уж речь зашла об авторизации, на путь в конфигурации роутера можно добавить meta: { myFieldName: "admin" } и затем понять, какая роль требуется указанному маршруту. Для этого в цикле нужно перебрать все части to.matched и посмотреть, есть ли среди них та, у которой указана meta с заполненным myFieldName.

    Под это дело даже официальный пример есть, хоть он и написан для проверки успешной аутентификации пользователя.
    Ответ написан