vue实现全局共享
Vue 实现全局共享的方法
使用 Vuex 状态管理
Vuex 是 Vue 的官方状态管理库，适用于中大型应用。通过集中式存储管理所有组件的状态，实现全局共享。
安装 Vuex：
npm install vuex --save创建 Vuex Store：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store在组件中使用：
this.$store.commit('increment')
console.log(this.$store.state.count)使用 Event Bus
Event Bus 是一个简单的全局事件系统，适用于小型应用或简单场景。
创建 Event Bus：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()在组件中发送事件：
import { EventBus } from './event-bus.js'
EventBus.$emit('event-name', payload)在组件中接收事件：
import { EventBus } from './event-bus.js'
EventBus.$on('event-name', payload => {
console.log(payload)
})使用 Provide/Inject
Vue 的 provide/inject 特性允许祖先组件向所有子孙组件注入依赖，适用于组件层级较深的场景。
在祖先组件中提供数据：
export default {
provide() {
return {
sharedData: this.sharedData
}
},
data() {
return {
sharedData: '全局数据'
}
}
}在子孙组件中注入数据：
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData)
}
}使用全局混入 (Global Mixin)
全局混入可以影响每一个 Vue 实例，适用于需要为所有组件添加相同功能的场景。
定义全局混入：
Vue.mixin({
data() {
return {
globalMessage: '全局消息'
}
},
methods: {
showGlobalMessage() {
console.log(this.globalMessage)
}
}
})在任何组件中使用：
this.showGlobalMessage()使用全局属性
Vue 3 中可以通过 app.config.globalProperties 添加全局属性，Vue 2 可以通过 Vue.prototype 实现。
Vue 3 示例：
app.config.globalProperties.$globalVar = '全局变量'Vue 2 示例：
Vue.prototype.$globalVar = '全局变量'在组件中使用：
console.log(this.$globalVar)每种方法适用于不同场景，Vuex 适合复杂状态管理，Event Bus 适合简单事件通信，Provide/Inject 适合深层组件数据传递，全局混入和属性适合添加通用功能。
