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

雯0609~2024-06-12 4:01

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

核心代码

javascript 复制代码

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

完整代码

javascript 复制代码

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

二、在页面引用全局方法

核心代码

javascript 复制代码

this.$checkPermission(this.username);

完整代码

javascript 复制代码

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

补充：涉及到异步问题

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

javascript 复制代码

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（调用方法）

javascript 复制代码

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');
    }

}