在 Vue 中，Mitt 和 Pinia 是两个不同的工具，它们的主要用途和功能有所不同，但在某些方面也存在重合的部分。
区别
Mitt：
Mitt 是一个简单而强大的事件总线库，用于在组件之间进行事件的发布和订阅。
它提供了一种简洁的方式来实现组件之间的通信，而无需借助 Pinia 或其他状态管理库。
使用方式类似于 Vue 2 的 EventBus，但在 Vue 3 中没有内置的 EventBus，因此需要通过第三方库如 mitt 来实现。
Pinia：
Pinia 是 Vue 的状态管理库，它允许您跨组件/页面共享状态。
Pinia 是 Vuex 的现代替代方案，提供了更简洁的 API 和更好的 TypeScript 支持。
它基于 Vue 的响应式系统实现，没有任何依赖，相较于 Vuex，Pinia 的代码量更小，运行更快。
pinia有永久化的需求
主要用途
Mitt：
主要用于组件之间的事件通信，例如在没有直接父子或兄弟关系的组件之间传递数据。
适用于需要在多个地方进行事件管理的小型项目或特定场景。
Pinia：
主要用于管理 Vue 应用中的全局状态，确保不同组件之间可以共享和管理状态。
适用于复杂的单页应用，特别是当状态管理需求较大时。
代码
Mitt：
# install
npm i mitt
案例中所用路径仅为参考
// utils/emitter.js
import mitt from "mitt"
const emitter = mitt()
export default emitter
// father.vue
<script setup>
import son1 from "son1.vue"
import son2 from "son2.vue"
</script>
<template>
<!--本案例中先加载监听者son2才能监听到son1发送的内容-->
<!--实际使用时可选择点击事件发送，那么就不需要考虑先后-->
<son2 />
<son1 />
</template>
// son1.vue
<template>
...
</template>
<script setup>
import emitter from "../utils/emitter"
emitter.emit('p1','发送一个参数')
</script>
// son2.vue
<template>
...
</template>
<script setup>
import emitter from "../utils/emitter.js"
emitter.on('p1',(msg)=>{
console.log(msg)})
</script>
Pinia：
# install
npm i pinia
案例中所用路径仅为参考
// main.js
import {
createApp } from 'vue'
import App from './App.vue'
import {
createPinia} from "pinia"
const pinia = createPinia()
// 第一种写法：createApp(App).use(pinia).mount("#app")
// 第二种写法：
const app = createApp(App)
app.use(pinia) //方便以后加载其它工具
app.mount("#app")
// store/User.js
import {
defineStore} from "pinia"
// 以下是选项式写法，还有更简便的组合式写法
export const useUserStore = defineStore('user',{
// 定义数据
state(){
return {
name: 'a',
data:{
title: 'b',
num: 12
}
}
},
// 安全起见：提供包装数据的方法
getters(){
},
// 安全起见：提供修改数据的方法
actions(){
}
})
// 获取及修改数据
// a.vue
<template>
...
</template>
<script setup>
import {
useUserStore} from "../store/user.js"
const userStore = useUserStore()
// 获取
console.log(userStore.name)
console.log(userStore.data)
// 直接修改（官方不建议）
userStore.name = 'c'
// 直接批量修改（官方不建议）
userStore.$patch({
name: 'd',
data: {
title: 'e',
num: 13
}
})
</script>
重合的部分
虽然 Mitt 和 Pinia 的主要用途不完全相同，但它们在某些方面确实存在重合的部分。
- 例如，在一些小项目中，如果只是需要简单的事件通信，那么可以使用 Mitt 来实现；
- 但如果项目逐渐变得复杂，需要管理更多的状态和逻辑，那么可能会考虑使用 Pinia 来替代或补充 Mitt。
- 此外，Mitt 也可以与 Pinia 一起使用，以实现更复杂的状态管理和事件通信机制。