Vue-封装公共方法

一、创建公共方法文件

首先，创建一个 JavaScript 文件（例如 utils.js）来存放公共方法。

// utils.js
export function formatDate(date) {
  // 将日期对象转换为字符串，格式为 YYYY-MM-DD
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}

export function sumArray(arr) {
  // 计算数组元素的总和
  return arr.reduce((total, num) => total + num, 0);
}

二、在 Vue 组件中使用公共方法

在 Vue 组件中，可以通过导入的方式使用这些公共方法。

<template>
  <div>
    <p>Formatted Date: {{ formattedDate }}</p>
    <p>Sum of Array: {{ arraySum }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { formatDate, sumArray } from './utils.js';

export default {
  setup() {
    const currentDate = new Date();
    const array = [1, 2, 3, 4, 5];

    const formattedDate = formatDate(currentDate);
    const arraySum = sumArray(array);

    return {
      formattedDate,
      arraySum
    };
  }
};
</script>

三、创建 Vue 插件（可选）

如果希望将公共方法作为 Vue 插件使用，可以创建一个插件文件。

// plugin.js
import { formatDate, sumArray } from './utils.js';

export default {
  install(app) {
    app.config.globalProperties.$formatDate = formatDate;
    app.config.globalProperties.$sumArray = sumArray;
  }
};

然后在 main.js 中使用该插件：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugin.js';

const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');

这样，在任何 Vue 组件中都可以通过 this.$formatDate 和 this.$sumArray 来使用这些公共方法：

<template>
  <div>
    <p>Formatted Date: {{ $formatDate(currentDate) }}</p>
    <p>Sum of Array: {{ $sumArray(array) }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentDate = new Date();
    const array = [1, 2, 3, 4, 5];

    return {
      currentDate,
      array
    };
  }
};
</script>

四、解释

1. 创建公共方法文件：
   utils.js 文件包含了多个导出的函数，如 formatDate 和 sumArray，它们可以执行特定的任务，如日期格式化和数组求和。这些函数是纯函数，接收输入并返回结果，不依赖 Vue 的内部状态。
2. 在 Vue 组件中使用公共方法：
   通过 import 语句导入公共方法，在 setup 函数中调用它们，并将结果存储在响应式变量中，如formattedDate 和 arraySum。这些变量可以在模板中使用。
3. 创建 Vue 插件（可选）：
   plugin.js 文件将公共方法作为 Vue 插件导出。install 函数接收 Vue 应用实例 app，并使用app.config.globalProperties 将公共方法挂载到 Vue 实例上。
   在 main.js 中，通过 app.use(MyPlugin) 注册插件，使其在整个 Vue 应用中可用。
   在组件中，可以使用 this.$formatDate 和 this.$sumArray 调用这些方法，利用 Vue 的全局属性机制。
   这样你就可以在 Vue3 中封装和使用公共方法了，根据具体需求可以扩展和修改这些方法。