vue3的全局混入【vue3】

在Vue 3中，全局混入（Mixin）的概念与Vue 2相似，但有一些细微的差别。全局混入允许你在多个组件之间共享方法、数据属性等，而不需要在每个组件中重复这些代码。

使用全局混入在Vue 3中，你可以通过在app.config.globalProperties上添加属性或方法来实现全局混入。但是，如果你想通过更“传统”的混入方式实现全局混入，你可以使用app.mixin()方法。

• 方法1：使用app.mixin()

这是最直接的方式来创建全局混入。你可以在你的入口文件（如main.js或main.ts）中添加混入：

import { createApp } from 'vue';
import App from './App.vue';
import MyMixin from './mixins/MyMixin';

const app = createApp(App);

// 使用全局混入
app.mixin(MyMixin);
app.mount('#app');

在你的混入文件（例如MyMixin.js或MyMixin.ts）中，你可以定义你想要在多个组件间共享的方法或数据：

export default {
  data() {
    return {
      globalData: '这是一个全局数据'
    };
  },
  methods: {
    globalMethod() {
      console.log('这是一个全局方法');
    }
  }
};

• 方法2：使用app.config.globalProperties

这种方法允许你直接在全局属性上添加方法或属性，这对于简单的函数或属性共享非常有用：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 在全局属性上添加方法或属性
app.config.globalProperties.$globalMethod = function () {
  console.log('这是一个全局方法');
};
app.config.globalProperties.$globalData = '这是一个全局数据';

app.mount('#app');

在组件中使用这些全局方法或属性：

export default {
  mounted() {
    this.$globalMethod(); // 调用全局方法
    console.log(this.$globalData); // 访问全局数据
  }
};

注意：
全局混入应该谨慎使用，因为它们会影响到所有使用该Vue应用的组件。如果可能，优先考虑使用组件级的混入或者提供（provide）/ 注入（inject）模式。

顺序问题：如果你有多个全局混入，它们将按照添加到app.mixin()的顺序应用。这意味着最后一个混入的属性或方法将覆盖之前混入的同名属性或方法。

Vue 3的Composition API：对于更复杂的逻辑和状态管理，Vue 3的Composition API提供了更好的灵活性和组织结构。你可以考虑将逻辑封装在自定义钩子（hooks）中，而不是使用混入。