Vue3封装全局方法

在Vue3项目开发中，当有一些公共的方法需要在多个组件中使用时，将这些方法封装成全局方法是一个很不错的解决方案。这样不仅可以减少代码的重复编写，还能提高代码的可维护性。

一、通过创建插件的方式

创建一个名为globalMethods.js的文件来定义插件。先引入必要的依赖：
javascript
import { defineNuxtPlugin } from '#app'

然后定义要挂载到全局的方法，例如一个格式化日期的方法：
javascript
export default defineNuxtPlugin((app) => {
const formatDate = (date, fmt) => {
let ret;
const opt = {
"y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须处理的格式化字符可直接写入返回的对应字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
}
return fmt;
}
app.config.globalProperties.$formatDate = formatDate; // 挂载到全局
})

在main.js中引入并使用这个插件：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import globalMethods from './plugins/globalMethods'

const app = createApp(App)
app.use(globalMethods)
app.mount('#app')
```

二、利用mixin（不推荐）

虽然Vue3官方已经不再推荐使用mixin，但在一些简单场景下，它仍然可以实现全局方法的封装。创建一个globalMixin.js文件：
javascript
export default {
methods: {
sayHello(name){
console.log(`Hello ${name}`);
}
}
}

然后在main.js中：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './mixins/globalMixin'

const app = createApp(App)
app.mixin(globalMixin)
app.mount('#app')
```

三、组合式API函数形式

如果不想挂载到全局，也可以以组合式API函数的形式封装公共逻辑。创建一个useUtils.js文件：
javascript
export function useFormatDate(){
return (date, fmt) => {
let ret;
const opt = {
"y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须处理的格式化字符可直接写入返回的对应字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
}
return fmt;
}
}

在组件中使用：
```javascript

import { ref } from 'vue'
import { useFormatDate } from './composables/useUtils'

const date = new Date()
const formatDate = useFormatDate()
const formattedDate = formatDate(date,'yyyy-MM-dd hh:mm:ss')

```