vue3中mitt和pinia的区别和主要用途，是否有可重合的部分？

在 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：

powershell 复制代码

# install
npm i mitt

案例中所用路径仅为参考

javascript 复制代码

// 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：

powershell 复制代码

# install
npm i pinia

案例中所用路径仅为参考

javascript 复制代码

// 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 一起使用，以实现更复杂的状态管理和事件通信机制。