Forked from Fuphoenixes/piniaPluginLoading

Auto loading data binding plugin for pinia. You don't need to write showLoading and hideLoading any more.

Installation

npm install pinia-plugin-loading

or

yarn add pinia-plugin-loading

Usage

import { createPinia } from 'pinia'
import { PiniaLoading } from 'pinia-plugin-loading'
const pinia = createPinia()
pinia.use(PiniaLoading)

Example

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      info: null
    }
  },
  actions: {
    async fetchData() {
      this.info = await requset('/api')
    }
  }
})

<template>
    <div>
       <loading :visible="store.$loading.fetchData" message="loading...">
    </div>
</template> 
<script lang="ts" setup>
import { useStore } from '@/store'
const store = useStore()
</script>

License

MIT