【vue3】vue3基础--全局混入

原创已于 2025-09-24 16:33:06 修改 · 799 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2025-05-17 18:58:16 首次发布

VUE 专栏收录该内容

14 篇文章

订阅专栏

在 Vue 3 中，全局混入（Global Mixin）的使用方式与 Vue 2 有所不同。以下是 Vue 3 中全局混入的几种实现方式：

文章目录

方法一：使用 app.mixin()（主要方式）

1. 基本全局混入

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

const app = createApp(App)

// 定义全局混入
app.mixin({
  data() {
    return {
      globalMessage: '这是全局数据'
    }
  },
  methods: {
    $globalMethod() {
      console.log('这是全局方法')
    }
  },
  created() {
    console.log('全局混入的 created 钩子')
  }
})

app.mount('#app')

2. 更复杂的全局混入示例

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

const app = createApp(App)

// 全局混入对象
const globalMixin = {
  data() {
    return {
      appName: 'My Vue 3 App',
      version: '1.0.0'
    }
  },
  computed: {
    // 全局计算属性
    $isMobile() {
      return window.innerWidth < 768
    },
    $currentYear() {
      return new Date().getFullYear()
    }
  },
  methods: {
    // 全局工具方法
    $formatDate(date) {
      return new Date(date).toLocaleDateString()
    },
    $showToast(message, type = 'success') {
      // 模拟 toast 提示
      console.log(`[${type.toUpperCase()}] ${message}`)
    },
    // 防抖函数
    $debounce(func, wait) {
      let timeout
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout)
          func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
      }
    }
  },
  // 生命周期钩子
  mounted() {
    console.log(`组件 ${this.$options.name || '匿名'} 已挂载`)
  }
}

app.mixin(globalMixin)
app.mount('#app')

方法二：使用 Composition API 的全局属性

Vue 3 推荐使用 app.config.globalProperties 替代部分混入功能：

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

const app = createApp(App)

// 设置全局属性
app.config.globalProperties.$appName = 'My Vue 3 App'
app.config.globalProperties.$filters = {
  formatCurrency(value) {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY'
    }).format(value)
  },
  truncate(text, length = 50) {
    return text.length > length ? text.substring(0, length) + '...' : text
  }
}

app.config.globalProperties.$api = {
  async get(url) {
    const response = await fetch(url)
    return await response.json()
  },
  async post(url, data) {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    return await response.json()
  }
}

app.mount('#app')

在组件中使用全局属性：

<template>
  <div>
    <h1>{{ $appName }}</h1>
    <p>价格: {{ $filters.formatCurrency(price) }}</p>
    <p>描述: {{ $filters.truncate(description) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 99.99,
      description: '这是一个很长的描述文本，需要被截断显示'
    }
  },
  async mounted() {
    const data = await this.$api.get('/api/data')
    console.log(data)
  }
}
</script>

方法三：组合式函数（推荐方式）

创建可复用的组合式函数：

// composables/useGlobal.js
import { ref, onMounted } from 'vue'

// 全局工具函数
export function useGlobalUtils() {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('zh-CN')
  }
  
  const debounce = (func, wait) => {
    let timeout
    return (...args) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => func.apply(this, args), wait)
    }
  }
  
  return {
    formatDate,
    debounce
  }
}

// 全局状态管理
export function useGlobalState() {
  const appName = ref('My Vue 3 App')
  const version = ref('1.0.0')
  const isMobile = ref(window.innerWidth < 768)
  
  const updateMobileStatus = () => {
    isMobile.value = window.innerWidth < 768
  }
  
  onMounted(() => {
    window.addEventListener('resize', updateMobileStatus)
  })
  
  return {
    appName,
    version,
    isMobile
  }
}

在组件中使用：

<template>
  <div>
    <h1>{{ appName }} v{{ version }}</h1>
    <p>设备: {{ isMobile ? '移动端' : '桌面端' }}</p>
    <p>日期: {{ formatDate(today) }}</p>
  </div>
</template>

<script>
import { useGlobalUtils, useGlobalState } from '@/composables/useGlobal'

export default {
  setup() {
    const { formatDate } = useGlobalUtils()
    const { appName, version, isMobile } = useGlobalState()
    
    const today = new Date()
    
    return {
      appName,
      version,
      isMobile,
      formatDate,
      today
    }
  }
}
</script>

方法四：插件方式

创建全局插件：

// plugins/globalMixin.js
export default {
  install(app) {
    // 全局混入
    app.mixin({
      created() {
        if (this.$options.name) {
          console.log(`组件 ${this.$options.name} 已创建`)
        }
      }
    })
    
    // 全局方法
    app.config.globalProperties.$notify = (message) => {
      alert(message)
    }
    
    // 全局属性
    app.config.globalProperties.$appConfig = {
      apiBaseUrl: process.env.VUE_APP_API_URL,
      maxFileSize: 10 * 1024 * 1024 // 10MB
    }
  }
}

在 main.js 中注册：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './plugins/globalMixin'

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