当前位置：首页 > news >正文

在组件外(.js文件)中使用pinia的方法2--在http.js中使用pinia

news 2025/11/14 7:31:02

解决方案一
说明：评论反馈有点问题，测试后发现不能存动态值，并且会影响数据持久化插件（如pinia-plugin-persistedstate）
解决方案二
现在给出解决方案二：在http.js中使用pinia
步骤如下：
1、在stores中创建loading.js

import { defineStore } from "pinia";
export const useLoadingStore = defineStore("loading", {state: () => ({isLoading: false,requestCount: 0,}),actions: {showLoading() {this.requestCount++;this.isLoading = true;},hideLoading() {this.requestCount--;if (this.requestCount <= 0) {this.requestCount = 0;this.isLoading = false;}},resetLoading() {this.requestCount = 0;this.isLoading = false;},},getters: {getLoadingState: (state) => state.isLoading,},
});

2、在http.js中引入
（1）、引入

import { useLoadingStore } from "@/stores/loading";let loadingStore;// 初始化loadingStore（需要在Vue应用上下文可用后调用）
export const initHttp = (app) => {loadingStore = useLoadingStore(app);
};

（2）、请求拦截时，显示loading

if (loadingStore) {loadingStore.showLoading();
}

（3）、响应拦截时，隐藏loading

if (loadingStore) {loadingStore.hideLoading();
}

3、在main.js中引入

 import { initHttp } from "@/utils/http";app.use(pinia)// 初始化 http，传入 pinia 实例// 注意顺序，在use后，mount前initHttp()app.mount('#app')

4、在App.vue中使用

<template><div id="app"><RouterView /><GlobalLoading  v-if="isLoading" /></div>
</template><script setup>
import { onMounted } from 'vue'
import { useLoadingStore } from '@/stores/loading'
// 自定义的loading组件
import GlobalLoading from '自定义的loading组件'const loadingStore = useLoadingStore();
const isLoading = computed(() => loadingStore.isLoading);onMounted(() => {// 确保应用启动时loading状态正确loadingStore.resetLoading()
})
</script>