在 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
<javascript setup>
import son1 from "son1.vue"
import son2 from "son2.vue"
</javascript>
<template>
<!--本案例中先加载监听者son2才能监听到son1发送的内容-->
<!--实际使用时可选择点击事件发送,那么就不需要考虑先后-->
<son2 />
<son1 />
</template>
// son1.vue
<template>
...
</template>
<javascript setup>
import emitter from "../utils/emitter"
emitter.emit('p1','发送一个参数')
</javascript>
// son2.vue
<template>
...
</template>
<javascript setup>
import emitter from "../utils/emitter.js"
emitter.on('p1',(msg)=>{console.log(msg)})
</javascript>
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 一起使用,以实现更复杂的状态管理和事件通信机制。