您的位置:首页 > 汽车 > 时评 > 开设计工作室赚钱吗_推广普通话的意义简短_陕西网站建设制作_app推广文案

开设计工作室赚钱吗_推广普通话的意义简短_陕西网站建设制作_app推广文案

2024/11/15 5:44:03 来源:https://blog.csdn.net/snans/article/details/143178001  浏览:    关键词:开设计工作室赚钱吗_推广普通话的意义简短_陕西网站建设制作_app推广文案
开设计工作室赚钱吗_推广普通话的意义简短_陕西网站建设制作_app推广文案

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com