《vue3封装js方法》

在Vue3项目开发中，我们经常会遇到一些需要重复使用的功能逻辑，将这些功能逻辑封装成js方法可以提高代码的复用性和可维护性。下面介绍几种Vue3封装js方法的解决方案。

一、直接在utils文件夹下创建工具函数

这是最简单直接的方式。我们可以新建一个utils文件夹，在里面创建一个js文件，例如common.js。

js
// common.js
export function formatDate(date) {
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
}


然后在组件中使用：

js
// 组件中
import { formatDate } from '@/utils/common.js';
export default {
name: 'MyComponent',
data() {
return {
currentDate: new Date()
}
},
computed: {
formattedDate() {
return formatDate(this.currentDate);
}
}
}


二、通过组合式API封装

利用Vue3的组合式API也可以很好地封装方法。

js
// useUtils.js
import { ref, reactive } from 'vue';
export function useValidation(rule) {
const errors = ref({});
const validate = (value, field) => {
if (!rule[field]) {
return;
}
if (rule[field].required && !value) {
errors.value[field] = `${field}是必填项`;
} else {
delete errors.value[field];
}
};
return {
errors,
validate
};
}


在组件里这样使用：

js
// 组件
import { useValidation } from '@/composables/useUtils.js';
export default {
setup() {
const rule = {
username: { required: true }
};
const { errors, validate } = useValidation(rule);
const username = ref('');
const submitForm = () => {
validate(username.value, 'username');
if (Object.keys(errors.value).length === 0) {
console.log('表单验证通过');
}
};
return {
username,
errors,
submitForm
};
}
}


这两种思路都能有效地在Vue3项目中封装js方法，根据实际项目需求和自己的编码习惯选择合适的方式即可。无论是简单的工具函数封装还是利用组合式API进行更复杂的逻辑封装，都能让我们的代码更加简洁高效。