Uniapp Vue2 Vue3常量保存及调用

在Vue2中,保存全局变量都是在APP.vue中,如下:

调用的话直接调用如下:

一、对于自定义的globalData,需要在APP.vue声明,然后页面中调用const app = getApp();,然后使用app.globalData.xxx获取,如下:

二、对于Vue.prototype里面的数据,直接调用this.xxx调用:

在Vue3中,全局变量有变化如下:

一、对于自定义的globalData和vue2中声明及调用方式不变,需要在页面中调用const app = getApp();,然后使用app.globalData.xxx获取,如下:

二、对于Vue.prototype里面的数据,需要在main.js初始化:

复制代码
import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.config.globalProperties.statusHeight = uni.getWindowInfo().statusBarHeight;
	app.config.globalProperties.windowWidth = uni.getWindowInfo().windowWidth;
	app.config.globalProperties.safeAreaTop = uni.getWindowInfo().safeArea.top;
	app.config.globalProperties.windowHeight = uni.getWindowInfo().windowHeight;
	app.config.globalProperties.isUpiPhoneX = false;
	const safeAreaBottom = uni.getWindowInfo().screenHeight - uni.getWindowInfo().safeArea.bottom
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// app.config.globalProperties.navHeight = menuButtonInfo.bottom + menuButtonInfo.top - e
	// 	.statusBarHeight;
	app.config.globalProperties.navHeight = (menuButtonInfo.top - uni.getWindowInfo().statusBarHeight) * 2 +
		menuButtonInfo.height + uni.getWindowInfo().statusBarHeight
	app.config.globalProperties.menuTop = menuButtonInfo.top;
	app.config.globalProperties.menuHeight = menuButtonInfo.height;
	app.config.globalProperties.isiPhoneX = safeAreaBottom == 34 ? true : false;
	// app.config.globalProperties.isiPhone11Pro = uni.getDeviceInfo().model.includes('iPhone 11 Pro') ? true : false;
	app.config.globalProperties.safeAreaBottom = safeAreaBottom;
	return {
		app
	}
}
// #endif

界面可以直接调用,js中需要声明一下getCurrentInstance参数,如下:

①界面调用:

②js调用:

相关推荐
佛系打工仔4 小时前
绘制K线第二章:背景网格绘制
android·前端·架构
计算机毕设VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue医院设备管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
明天好,会的6 小时前
分形生成实验(五):人机协同破局--30万token揭示Actix-web状态管理的微妙边界
运维·服务器·前端
C_心欲无痕6 小时前
nginx - alias 和 root 的区别详解
运维·前端·nginx
北辰alk7 小时前
Vue 路由信息获取全攻略:8 种方法深度解析
vue.js
北辰alk7 小时前
Vue 三剑客:组件、插件、插槽的深度辨析
vue.js
北辰alk7 小时前
Vue Watch 立即执行:5 种初始化调用方案全解析
vue.js
北辰alk7 小时前
Vue 组件模板的 7 种定义方式:从基础到高级的完整指南
vue.js
北辰alk7 小时前
深入理解 Vue 生命周期:created 与 mounted 的核心差异与实战指南
vue.js