vue3 全局属性 全局方法：如何在vue3中创建全局属性和方法

🎯 Vue3全局属性和方法：让你的代码更优雅高效

场景引入：
小明正在开发一个电商后台系统，发现每个页面都要重复导入formatPrice价格格式化函数，10个组件里写了20遍$axios请求工具...🤯 这时候就需要全局属性和方法来拯救他了！

为什么要用全局属性/方法？

1️⃣ 避免重复导入（比如工具函数、API实例）
2️⃣ 跨组件共享（比如用户权限检查方法）
3️⃣ 保持一致性（所有组件调用同一个方法）

// 不用全局方法时（每个文件都要写）👇
import { formatDate } from '@/utils'
const formatted = formatDate(new Date())
// 用了全局方法后（直接调用）✨
const formatted = this.$formatDate(new Date())

3种实现方式（附代码示例）

方式1：app.config.globalProperties（推荐🔥）

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局方法
app.config.globalProperties.$formatPrice = (price) => {
  return '¥' + price.toFixed(2)
}
// 添加全局属性（比如axios实例）
app.config.globalProperties.$api = axios.create({
  baseURL: 'https://your-api.com'
})
app.mount('#app')

组件中使用：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.$formatPrice(99.8)) // ¥99.80
proxy.$api.get('/user')
</script>

方式2：Provide/Inject（适合插件开发）

// main.js
app.provide('formatPrice', (price) => {
  return '¥' + price.toFixed(2)
})

组件中使用：

<script setup>
import { inject } from 'vue'
const formatPrice = inject('formatPrice')
formatPrice(199.9) // ¥199.90
</script>

方式3：插件封装（最专业✨）

// plugins/global.js
export default {
  install(app) {
    app.config.globalProperties.$sleep = (ms) => {
      return new Promise(resolve => setTimeout(resolve, ms))
    }
    app.provide('$track', (event) => {
      console.log('埋点事件:', event)
    })
  }
}
// main.js
import globalPlugin from './plugins/global'
app.use(globalPlugin)

TypeScript支持（2025年必备技能）

// src/types/vue.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $formatPrice: (price: number) => string
    $api: AxiosInstance
  }
}

💡 添加后TS不再报错，VSCode还能智能提示！

最佳实践建议

✅ 命名规范：全局属性建议用开头（如$auth）
✅ 适度使用：只有真正全局的才挂载，避免污染全局空间
✅ 安全方法：避免挂载会修改状态的方法
❌ 不要滥用：组件间通信优先用props/emit

常见问题答疑

Q：全局方法能替代Vuex/Pinia吗？
A：不能！状态管理库专为响应式数据设计，全局方法适合工具函数。

Q：为什么我挂载的方法在模板里不生效？
A：检查是否拼写错误，或在setup语法糖中正确使用了getCurrentInstance()

：
全局属性和方法就像你的瑞士军刀🛠️ —— 用对了事半功倍，用错了可能伤到自己，根据项目需求选择合适方案，让代码既干净又高效！

（本文代码示例基于Vue 3.4+，最后更新于2025年8月）