mohamadkhani/piniaPluginLoading

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

Pinia Plugin Loading

Auto loading data binding plugin for pinia. You don't need to write showLoading or 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)

All actions in your stores now have a matching, reactive boolean in $loading that indicates whether the action is pending or not.

Example

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

<template>
  <div>
    <loading v-if="store.$loading.fetchData" message="Loading…" />
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/store'
const store = useStore()
</script>

License

MIT