uni-app+vue3 封装全局函数(详细完整的方法)

66 阅读1分钟

在uni-app和vue3中,我们可以封装全局函数来复用代码。以下是详细的步骤:

  1. 首先,我们需要在main.js文件中引入我们封装的全局函数。这样我们就可以在整个项目中使用这些函数。
import globalFunctions from './globalFunctions'
Vue.prototype.$globalFunctions = globalFunctions
  1. 然后,我们在globalFunctions.js文件中定义我们的全局函数。例如,我们可以定义一个打印日志的函数和一个发送网络请求的函数。
// 打印日志的函数
export function log(message) {
    console.log(message)
}
​
// 发送网络请求的函数
export function request(url, method = 'GET', data = {}) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: method,
            data: data,
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}
  1. 最后,我们可以在我们的组件中使用这些全局函数。例如,我们可以在methods对象中定义一个使用这些函数的方法。
export default {
    methods: {
        test() {
            // 使用全局函数打印日志
            this.$globalFunctions.log('Hello, World!')
            // 使用全局函数发送网络请求
            this.$globalFunctions.request('/api/data').then(res => {
                console.log(res)
            }).catch(err => {
                console.error(err)
            })
        }
    }
}

以上就是在uni-app和vue3中封装全局函数的详细完整的方法。