Vue3中如何实现全局加载状态且不影响子组件数据刷新？

Top丶卫红提问于 2026-02-18 12:17:24 阅读 18

交互

我在用Vue3+Pinia开发时遇到个问题：需要在接口请求时显示全局加载遮罩，但发现当多个接口同时请求时，loading状态会提前关闭。我尝试在main.js里用ref管理loading计数：


const loadingCount = ref(0)
const showLoading = () => loadingCount.value++
const hideLoading = () => loadingCount.value--

export { showLoading, hideLoading }

然后在每个接口调用前手动调用showLoading/hideLoading，但子组件里的数据更新后，loading有时会卡在1的状态。比如删除列表项时，虽然数据删除成功，但遮罩层还显示着。是不是计数器没同步到子组件？或者需要改用Pinia的状态管理？

我来解答赞 3 收藏

反馈

1 条解答

设计师爱丹 Lv1

问题出在计数器的同步上，建议用Pinia统一管理loading状态。应该改成这样：



// store/loading.js

import { defineStore } from 'pinia'



export const useLoadingStore = defineStore('loading', {

  state: () => ({ count: 0 }),

  actions: {

    show() { this.count++ },

    hide() { this.count = Math.max(0, this.count - 1) }

  },

  getters: {

    isLoading: (state) => state.count > 0

  }

})

在main.js里全局引入这个store，接口调用时用useLoadingStore().show()和useLoadingStore().hide()来控制。记得在hide时加个安全判断，避免负数。这样一来状态就统一了，子组件更新也不会出现卡住的情况。

2026-02-18 13:00