Задать вопрос

Arsync

Информация
Пользователь пока ничего не рассказал о себе

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

Все теги (3)

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

Все ответы (3)

  • Как правильно писать на 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 комментариев
    5 комментариев

  • Где принято размещать функции проверки наличия авторизации пользователя в приложении при его старте, на примере vue cli?

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

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