uni-app+vue3+pina实现全局加载中效果,自定义全局变量和函数可供所有页面使用
首先自定义一个加载中组件
ccloading.vue
然后再pina里面保存这个?showLoading的值。判断是否显示加载中。也就是上面引入的
/store/common.ts文件
import { defineStore } from 'pinia' import piniaPersistConfig from "@/store/helper/persist";//因为persist不支持小程序的缓存。所以再这个页面重写了一下存储方式。参考这个 export interface State { showLoading: boolean; } // @ts-ignore export const useCommonStore = defineStore('pack-store', { persist: piniaPersistConfig("pack-store"), state: (): State => ({ showLoading:false,//loading是否显示 }), getters: {}, actions: { setChangeLoading(data:boolean){ console.log("changeLoading",data) this.showLoading = data; }, }, });
?main.js定义全局组件。定义全局函数
import { createSSRApp } from "vue"; import Vue from "vue"; import App from "./App.vue"; import store from "./store"; import {useCommonStore} from "@/store/common"; import newRequestLoading from '@/components/ccloading/ccloading.vue'; export function createApp() { const app = createSSRApp(App); app.use(store); app.component('new-loading', newRequestLoading); const commonStore = useCommonStore(); // 添加全局属性方法 app.config.globalProperties.$loadingStatus=commonStore.showLoading; app.config.globalProperties.$loading = { show() { commonStore.setChangeLoading(true); }, hide() { commonStore.setChangeLoading(false); } } return { app, }; }
然后就可以在页面使用了
index.vue