vue3中监听全局方法
在Vue 3项目开发过程中，我们可能会遇到需要监听全局方法的场景。比如用户登录状态的变化、主题模式的切换等，这些全局的状态变化可能会影响到多个组件。为了解决这一问题，可以使用Vuex（对于大型应用）、提供/注入API或者事件总线等方式。
一、使用Pinia进行状态管理
对于较复杂的全局逻辑处理，推荐使用官方的状态管理库Pinia。它能方便地创建store来存储和管理共享状态，并且可以通过定义actions来触发一些异步操作或业务逻辑，其他组件订阅这些状态变化即可实现对全局方法执行结果的监听。
安装pinia：npm install pinia
- 创建store文件夹，在其中新建index.js：
```js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
state: () => {
return {
globalData: ''
}
},
actions: {
changeGlobalData(newVal) {
this.globalData = newVal
}
}
})
2. 在main.js中引入并挂载到vue实例上：
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
3. 组件中使用：
import { useMainStore } from './stores'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
// 只读取state中的值
const { globalData } = storeToRefs(mainStore)
// 修改globalData时会触发视图更新
mainStore.changeGlobalData('new value')
```
二、利用provide / inject API
如果是父子组件之间传递数据或者小型项目，可以采用provide/inject的方式。父组件通过provide暴露属性或方法给子孙组件，子孙组件通过inject接收。
父组件：
```js
import { ref, provide } from 'vue'
const globalMethod = () => {
console.log('this is a global method')
}
provide('globalMethod', globalMethod)
子组件：
import { inject } from 'vue'
const globalMethod = inject('globalMethod')
// 监听函数是否改变（如果函数内部逻辑变了）
watch(() => globalMethod.toString(), (newVal, oldVal) => {
console.log('global method changed')
}, { immediate: true })
```
三、使用mitt作为简单事件总线
mitt是一个轻量级的事件发射器，适用于解耦不同模块之间的通信。先安装mitt:npm install mitt
- 创建eventBus.js:
js
import mitt from 'mitt'
const eventBus = mitt()
export default eventBus
- 发送事件的地方：
```js
import eventBus from './eventBus'
function someGlobalFunction() {
// do something...
eventBus.emit('global-event', { data: 'some data' })
}
3. 接收事件的地方：
import eventBus from './eventBus'
eventBus.on('global-event', (e) => {
console.log(e.data)
})
```
以上就是在Vue 3中监听全局方法的一些思路，具体选择哪种方式取决于项目的规模和个人偏好。
