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

特创数字科技2023-12-01 18:25

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

首先，我们需要在main.js文件中引入我们封装的全局函数。这样我们就可以在整个项目中使用这些函数。
复制代码
```
 import globalFunctions from './globalFunctions'
 Vue.prototype.$globalFunctions = globalFunctions
```

然后，我们在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)
             }
         })
     })
 }

最后，我们可以在我们的组件中使用这些全局函数。例如，我们可以在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中封装全局函数的详细完整的方法。