当前位置：首页 > news >正文

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

news 2025/9/13 23:51:27

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