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

uni-app:利用Vue的原型对象Vue.prototype设置全局方法及其引用

一、在main.js中设置方法checkPermission绑定到Vue.prototype

核心代码

Vue.prototype.$checkPermission = function(username) {console.log('Checking permission for:', username);
};

完整代码

import App from './App'// 添加 checkPermission 方法到 Vue.prototype 上,检查权限(这一段是方法的设置)
Vue.prototype.$checkPermission = function(username) {console.log('Checking permission for:', username);
};// #ifndef VUE3
import Vue from 'vue'
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)return {app}
}
// #endif

二、在页面引用全局方法

核心代码

this.$checkPermission(this.username);

完整代码

export default {data() {return {username: 'testuser'};},methods: {onLoad() {this.$checkPermission(this.username);//调用方法,传递参数username}}
};

补充:涉及到异步问题

一、main.js(全局方法有请求服务器的操作)

import App from './App'
// 添加 checkPermission 方法到 Vue.prototype 上,检查权限
Vue.prototype.$checkPermission = function(username) {return new Promise((resolve, reject) => {uni.request({url: getApp().globalData.position + 'Xcxuser/checkpermission',header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',data: {username: username,},success: res => {// console.log('Server Response:', res);resolve(res);},fail: err => {console.log(err);reject(err);}});});
};// #ifndef VUE3
import Vue from 'vue'
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)return {app}
}
// #endif

二、userlogin.vue(调用方法)

methods: {//权限检查async checkUserPermission(username) {try {const response = await this.$checkPermission(username);console.log('Server Response:', response);this.permissionResult = response.data; // 假设服务器返回的数据在response.data中this.permissionChecked = true;} catch (error) {console.error('Error checking permission:', error);}},mounted() {// 页面加载时调用权限检查this.checkUserPermission('yourUsername');}}

http://www.lryc.cn/news/366924.html

相关文章:

  • django接入djangorestframework-simplejwt步骤
  • 前端工程化工具系列(十)—— Browserslist:浏览器兼容性配置工具
  • 双列集合底层源码
  • 【Ardiuno】实验使用ESP32连接Wifi(图文)
  • 优化家庭网络,路由器无线中继配置全攻略(中兴E1600无线中继设置/如何解决没有预埋有线网络接口的问题/使用闲置路由实现WIFI扩展)
  • 【ArcGIS微课1000例】0114:基于DEM地形数据整体抬升或下降高程
  • AGP4+ 打包运行闪退,AGP7+ 正常(has code but is marked native or abstract)
  • ChatGPT3.5和ChatGPT4.0、ChatGPT4o对比
  • 【知识拓展】HTTP、WebSocket 和 RPC:区别与使用场景详解
  • C语言printf( ) 函数和 scanf( ) 函数格式符的修饰符 “*”有什么作⽤?
  • java 使用WebClient发送https请求
  • Python 中的内存管理机制
  • Mac电脑重置网络命令
  • C++期末复习总结(2)
  • [word] word大括号怎么打两行 #其他#其他#微信
  • 【python】python指南(二):命令行参数解析器ArgumentParser
  • 香橙派 Orange AIpro 测评记录视频硬件解码
  • 四天工作制,比你想象的更近了一点
  • (UE4.26)UE4的FArchive序列化入门
  • Inpaint9.1软件下载附加详细安装教程
  • Unity 集成 FMOD 音频管理插件 2.02
  • Linux下线程的互斥与同步详解
  • 【栈】736. Lisp 语法解析
  • 什么时候用C而不用C++?
  • unix环境编程编程扫描版:深度解析与实践指南
  • 2024年6月8日 每周新增游戏
  • AI提示词Prompts有没有好公式?( 计育韬老师高校公益巡讲答疑实录2024)
  • 一个 buffer 使用的负反馈实例
  • 小程序简单版录音机
  • 苹果手机微信如何直接打印文件