vue3引入公共方法

在Vue 3项目中，当多个组件需要使用相同的逻辑或功能时，将这些代码提取成公共方法是一个良好的实践。这不仅有助于保持代码的整洁和可维护性，还能提高代码复用率。下面介绍几种在Vue 3中引入公共方法的解决方案。

1. 使用Composition API

这是Vue 3推荐的方式，通过组合式API（Composition API）来定义和复用逻辑。我们可以通过创建一个独立的JS文件来存放公共方法，并将其导入到需要使用的组件中。

在src/utils/commonMethods.js文件中定义公共方法：

``js // src/utils/commonMethods.js export function formatDate(date) { const d = new Date(date); return${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
}

export function calculateAge(birthDate) {
const today = new Date();
const birth = new Date(birthDate);
let age = today.getFullYear() - birth.getFullYear();
const m = today.getMonth() - birth.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
age--;
}
return age;
}
```

然后在组件中使用：

vue</p>


import { formatDate, calculateAge } from '../utils/commonMethods';

const formattedDate = formatDate('2023-04-01');
const userAge = calculateAge('1990-05-15');

console.log(formattedDate); // 输出格式化后的日期
console.log(userAge);       // 输出计算后的年龄


<p>

2. 创建混合（Mixins）

虽然Vue 3仍然支持混合，但官方更推荐使用Composition API。不过如果你的项目已经使用了混合，或者你想兼容旧版代码，可以继续使用这种方式。

创建一个mixins文件：

js // src/mixins/commonMixin.js export default { methods: { formatDate(date) { const d = new Date(date); return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`; }, calculateAge(birthDate) { const today = new Date(); const birth = new Date(birthDate); let age = today.getFullYear() - birth.getFullYear(); const m = today.getMonth() - birth.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) { age--; } return age; } } };

在组件中使用：

vue</p>


import commonMixin from '../mixins/commonMixin';

export default {
    mixins: [commonMixin],
    mounted() {
        console.log(this.formatDate('2023-04-01')); // 调用混入的方法
        console.log(this.calculateAge('1990-05-15'));
    }
};


<p>

3. 使用插件形式

如果你想让公共方法在整个应用中都可用，可以考虑将其封装成一个Vue插件。这样可以在任何地方直接调用，而不需要显式导入。

创建插件文件：

``js // src/plugins/globalMethods.js export default { install(app) { app.config.globalProperties.$formatDate = function(date) { const d = new Date(date); return${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
};

    app.config.globalProperties.$calculateAge = function(birthDate) {
        const today = new Date();
        const birth = new Date(birthDate);
        let age = today.getFullYear() - birth.getFullYear();
        const m = today.getMonth() - birth.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
            age--;
        }
        return age;
    };
}

};
```

在main.js中注册插件：

js
import { createApp } from 'vue';
import App from './App.vue';
import globalMethods from './plugins/globalMethods';</p>

<p>const app = createApp(App);
app.use(globalMethods);
app.mount('#app');

现在你可以在任何组件中直接使用这些方法：

vue</p>


export default {
    mounted() {
        console.log(this.$formatDate('2023-04-01')); // 通过this.$xxx访问
        console.log(this.$calculateAge('1990-05-15'));
    }
};


<p>

以上三种方式都可以有效地将公共方法引入Vue 3项目中，具体选择哪种取决于你的项目需求和个人偏好。对于新项目，建议优先考虑使用Composition API，因为它提供了更好的灵活性和可维护性。