作者：Emil Hein
译者：前端小智
起源：betterprogramming
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
自从我开始应用Vue 3和组合API以来，我也尝试应用 Pinea 作为状态治理库。如果是从是 vue2 和 vuex 过去的，就会感觉用起来差异还是很大的。
说实话，我对 Vuex 应用还是很不适应。最后，有 "很多 "的模板代码，只是让 store 应用缩小。不过，状态治理的确给咱们带来了遍历，特地是每当咱们有一小块应该跨组件共享的状态时，就会更偏向于应用它。
咱们先来看看 Vuex 和 Pinia 的整体设计以及它们之间的区别是什么。
Vuex
上面是Vuex工作原理的官网图示，刚开始学习时，一看就很懵，不过当用过期开发过我的项目时，一看就就能懂了。
在 Vuex store（仓库）中，有4个次要组件。
1. State
这只是一个蕴含理论状态的对象。咱们能够在开发工具中看到这个状态，如果想保留这个状态用于缓存或其余目标，也能够保留这个对象。
2. Actions
Actions 是执行异步工作的函数。它们是由关键字dispatch发动的。
Actions 通常会申请一个内部 API 或做一些其余的异步工作。它还负责调用适当的 mutation 来理论扭转状态。这阐明 actions 自身并没有扭转状态，而是 commit 变动，让 mutation 来扭转状态。
3. Mutations
Mutation 是惟一会真正同步扭转状态的函数。Mutations 应用关键字commit。
4. Getters
Getters能够被认为是计算过的属性，应该被用来从状态中取得一个批改过的响应。
一个简略的Vuex store 的例子如下所示：
const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})应用 store
在解决上述问题时，一个组件通常会调用dispatch来启动异步工作（比方从内部API中获取）。如果须要扭转状态，比方一个简略的计数器，能够调用 commit。
这意味着一个组件能够通过调用dispatch或commit来与 store 进行交互。我不晓得你怎么想，但对我来说，这减少了一些心智累赘，而我真的不须要。
在应用Vuex之前，我对 "commit" 和 "dispatch" 这两个术语并不相熟。因为这个起因，用它们来扭转状态对我来说并不直观。对于一些人来说，这可能是不同的，但这让我感觉应用 action 或 mutation 都有点不难受。
另外值得注意的是，应用Vuex，一个组件能够拜访整个 store，只管在逻辑上将 Vuex store 分成不同的文件。
Pinia
与Vuex相比，Pinia的工作原理图如下：
整体架构比 Vuex 更简略，更容易了解。一个Pinia store 有3个次要组成部分:
1. State
与Vuex的定义一样。
2. Actions
这里的 Actions 与Vuex中的 Actions 和 mutations 的工作雷同。这些函数是扭转状态的惟一形式。如果想从内部API获取数据并更新状态，也能够应用 actions 。
与Vuex设置的另一个区别是，Pinia actions 是一般函数，心智累赘比 vuex 小很多。
3. Getters
getter 齐全等同于 Store 状态的计算属性
一个简略的Pinia store 的例子如下所示：
export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ } },})应用
如果有多个模板， Vuex 个别采纳 modules 形式，这就须要在 store/index.ts中将所有的 modules通过 creaeStore 注册到 store 中，那么Pinia 就省去了这些麻烦，createPinia() 即可，不须要注册 modules，没有任何参数，所以连 store/index.ts都能够不必了，间接在main.ts 中增加即可， 这一点会比Vuex简洁很多
import { createPinia } from 'pinia'app.use(createPinia())；# main.tsimport { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'const app = createApp(App)app.use(createPinia())app.mount('#app')总结
就目前而言，我想说Pinia更容易了解和应用。兴许有一些货色能够让Vuex在更大的我的项目中更好地扩大，但我还没有遇到过这种状况。
对我来说，另一件重要的事件是，咱们能够用失常的参数调用 actions 的失常办法。
Pinia还反对Vue 2和3的开箱即用，这使得迁徙变得更加容易。
劣势
最初也在总结一下 Pinia 劣势：
- Vue2 和 Vue3 都反对
- 更小，只有1KB
- 不须要嵌套模块，合乎Vue3的Composition api，让代码更加扁平化
- 摈弃了Mutations的操作，只有state、getters和actions.极大简化了状态治理库的应用残缺的TypeScript反对
- 代码更加简洁，能够实现很好的代码主动宰割
Pinia还有很多的用户和细节，请转官网文档Home | Pinia (vuejs.org)
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原谅：https://betterproramming.pub/...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。