About this post
on the web page, the progress bar tends to be global component.
And, it is preferred to be opened from TypeScript (not from Vue template using v-if ) because the bar should be opened only while the process.
In this post, the way of implementation about progress bar opened from TypeScript is introduced.
Target readers
- the developers who want to implement
progressbarby Vue.js or Nuxt.js - the developers who have basics about store and Vuetify.js (some basic parts of store and Vuetify will be omitted.)
Versions
| content | version |
|---|---|
| nuxt | 2.15.8 |
| nuxt-typed-vuex | 0.3.0 |
| vue | 2.6.14 |
| vuetify | 2.6.1 |
the directory structure
sampleProject ├componens | └progressbar.vue ├pages | └index.vue ├store | ├index.ts | └progressbar.ts └types └index.d.ts Steps to open the progress bar from TypeScript
- the heavy process is executed.
- the store of
progressbaris called. - while the heavy process is executed, progress bar component is shown thanks to the store of of
progressbar. - after the heavy process is done, progress bar component is not shown anymore.
Create a store to control progress bar
Create 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); } }, }, ); Register the store by creating 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, }, }); Extend the types for vue so that the store can be accessed from the file of vue extension.
create types/index.d.ts
import { accessorType } from '~~/store'; declare module 'vue/types/vue' { interface Vue { $accessor: typeof accessorType; } } Create a progress bar component
By the implementation of this.$store.subscribe, catch the change notification of store progressbar and change the visibility according to isShown store value.
<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> Open progress bar from TypeScript
Create pages/index.vue .
Only in the scope of await this.$accessor.progressbar.open(async () => {}); , the progress bar is shown.
<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> 
Top comments (0)