vue + vite使用mixins

Vue.js 和 Vite 结合使用时，`mixins` 是一种在 Vue 组件之间共享属性和方法的有效方式。它允许你在一个文件中定义一些通用的功能或数据，然后在需要的地方导入并混入这个文件，使得组件能够复用这部分代码。

以下是关于 `mixins` 的基本用法：

1. **创建 Mixin 文件**：在一个名为 `mixin.js` 或类似名称的文件中，编写你需要共享的代码，如计算属性、生命周期钩子、方法等：

// mixin.js
export default {
  data() {
    return {
      commonData: '这是公共数据'
    };
  },
  methods: {
    commonMethod(arg) {
      console.log(`这是一个公共方法: ${arg}`);
    }
  },
  beforeCreate() {
    // 其他生命周期函数
  }
}

2. **引入 Mixin**：在需要复用功能的组件里，通过 `import` 引入并混入 Mixin：

// 组件A.vue
<template>
  <div>
    <p>{{ commonData }}</p>
    <button @click="commonMethod('调用了公共方法')">点击这里</button>
  </div>
</template>

<script>
import MyMixin from '@/mixins/mixin';

export default {
  mixins: [MyMixin],
  data() {
    return {
      localData: '这是组件本地的数据'
    };
  },
  methods: {
    customMethod() {
      this.commonMethod(this.localData);
    }
  }
};
</script>