Vue.js, Nuxt.js, Vuetify - 프로세스 중에 store를 사용하여 TypeScript에서 진행률 표시줄 열기

이 게시물 정보

웹 페이지에서 진행률 표시줄은 전역 구성 요소인 경향이 있습니다.
그리고 v-if 를 사용하는 Vue 템플릿이 아닌 TypeScript에서 여는 것이 좋습니다. 프로세스 중에만 막대가 열려야 하기 때문입니다.
이번 포스팅에서는 TypeScript에서 열리는 프로그레스 바에 대한 구현 방법을 소개합니다.

대상 독자

Vue.js 또는 Nuxt.js

로 progressbar를 구현하려는 개발자

store 및 Vuetify.js에 대한 기본 지식이 있는 개발자 (store 및 Vuetify의 일부 기본 부분은 생략됩니다.)

버전

콘텐츠
버전


눅스트
2.15.8

nuxt 유형 vuex
0.3.0

뷰
2.6.14

vuetify
2.6.1


디렉토리 구조

sampleProject
├componens
| └progressbar.vue
├pages
| └index.vue
├store
| ├index.ts
| └progressbar.ts
└types
  └index.d.ts

TypeScript에서 진행률 표시줄을 여는 단계

무거운 프로세스가 실행됩니다.

progressbar의 매장이라고 합니다.

무거운 프로세스가 실행되는 동안 progressbar의 저장소 덕분에 진행률 표시줄 구성 요소가 표시됩니다.

무거운 프로세스가 완료된 후 진행률 표시줄 구성 요소가 더 이상 표시되지 않습니다.

진행률 표시줄을 제어할 스토어 만들기

생성store/progressbar.ts .

import { mutationTree, actionTree } from 'typed-vuex';

// isShown is to control whether progress bar is shown or not
export const state = () => ({
  isShown: false as boolean,
});
export type RootState = ReturnType<typeof state>;

export const mutations = mutationTree(state, {
  change(state, isShown: boolean) {
    state.isShown = isShown;
  },
});

export const actions = actionTree(
  { state, mutations },
  {
    async open({ commit }, action: Function) {
      // only while action is executed, the progress bar is opened
      commit('change', true);
      try {
        await action();
      } finally {
        // even if the argument action throws an error, the progress bar should be closed
        commit('change', false);
      }
    },
  },
);

store/index.ts를 생성하여 상점을 등록하십시오.

import {
  getAccessorType,
  getterTree,
  mutationTree,
  actionTree,
} from 'typed-vuex';
// if there is other stores, import here
import * as progressbar from './progressbar';

export const state = () => ({});
export const getters = getterTree(state, {});
export const mutations = mutationTree(state, {});
export const actions = actionTree({ state, getters, mutations }, {});
export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    // if there is other stores, add here
    progressbar,
  },
});

vue 확장자의 파일에서 저장소에 액세스할 수 있도록 vue에 대한 유형을 확장하십시오.
생성types/index.d.ts

import { accessorType } from '~~/store';

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType;
  }
}

진행률 표시줄 구성 요소 만들기

this.$store.subscribe 구현으로 매장progressbar의 변경 알림을 포착하고 isShown 매장 값에 따라 가시성을 변경합니다.

<template>
  <!-- set z-index so that this progress bar can be shown above the modal dialog -->
  <v-overlay z-index="100" :value="isShown">
    <v-progress-circular indeterminate color="primary"></v-progress-circular>
  </v-overlay>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'AppProgressbar',
  data() {
    return {
      isShown: false,
    };
  },
  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'progressbar/change') {
        this.isShown = state.progressbar.isShown;
      }
    });
  },
});
</script>

TypeScript에서 진행률 표시줄 열기

생성pages/index.vue .await this.$accessor.progressbar.open(async () => {}); 범위에서만 진행률 표시줄이 표시됩니다.

<template>
  <button @click="doHeavyProcess">Execute</button>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    async doHeavyProcess() {
      await this.$accessor.progressbar.open(async () => {
        // in this scope, the progress bar is shown
        await this.$axios.get('https://example.com');
      });
      // out of the scope of progress bar, the progress bar is not shown
    },
  },
});
</script>

참조