vue + vite + ts使用mixins

Vue + Vite + TypeScript 中使用 Mixins 的目的是为了在 Vue 组件之间共享数据属性、方法或者生命周期钩子。Mixins 可以帮助我们避免重复代码，并且保持组件的解耦。

以下是使用 Mixins 的步骤：

1. **安装依赖**：首先确保项目已经安装了 Vue 和 Vite。如果还没有安装，可以分别使用 `npm install vue` 和 `npm create vite my-project` 创建新项目。

2. **引入 TypeScript 支持**：在项目的 `vite.config.ts` 文件中配置 TypeScript 插件支持，如 `@vue/compiler-sfc` 和 `ts-node` 等。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import typescript from 'vite-ts';

export default defineConfig({
  plugins: [vue(), typescript()],
  // ...其他配置...
});

3. **创建 Mixin**：在一个单独的文件中，例如 `mixin.ts`，定义你想要复用的功能。

// mixin.ts
export default {
  data() {
    return {
      sharedData: 'This is a shared property',
    };
  },
  methods: {
    sharedMethod() {
      console.log('This method is shared');
    }
  },
  beforeCreate() {
    console.log('Shared hook called on create');
  },
};

4. **在组件中使用 Mixin**：在需要复用 Mixin 功能的组件里导入并混入 Mixin。

// MyComponent.vue
<template>
  <div>{{ sharedData }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import mixins from './mixin';

const myData = ref('Component-specific data');

setup() {
  const mergedData = { ...mixins.data(), ...{ myData } };
  
  // 使用混合方法
  mixins.sharedMethod();

  // ... 其他组件逻辑

  return {
    props: ['myProp'],
    data() {
      return mergedData;
    },
    created() {
      // 如果有自定义的生命周期，可以在这里添加
    },
  };
}
</script>