测试一下Pinia，Vuex 要出局了？

好景不长我已经开始采用Vue 3和女团API年来，我也试著采用 Pinea 做为状况管理组织工作库。假如从是 vue2 和 vuex 回来的，就会真的用出来差异却是非常大的。

虽说，我对 Vuex 采用却是很不适应环境。起初，有 “许多 “的模版标识符，而已让 store 采用增加。但是，状况管理组织工作的确给他们增添了结点，不光是每每他们有一小片如果跨模块共享资源的状况时，就会更偏激于采用它。

他们先来看一看 Vuex 和 Pinia 的总体结构设计和它间的差别是甚么。

Vuex

上面是Vuex组织工作基本原理的非官方库尔，刚已经开始自学时，一看就很懵，但是当用落伍合作开发过工程项目时，一看就就能懂了。

在 Vuex store（库房）中，有4个主要就模块。

1. State

这而已两个包涵前述状况的第一类。他们能在应用软件中看见那个状况，假如想留存那个状况用作内存或其它目地，也能留存那个第一类。

2. Actions

Actions 是继续执行触发器各项任务的表达式。它们是由URLdispatch发动的。

Actions 一般来说会允诺两个内部 API 或做许多其它的触发器组织工作。它还负责管理初始化适度的 mutation来前述发生改变状况。这表明 actions 这类并没发生改变状况，而是commit 变动，让 mutation 来发生改变状况。

3. Mutations

Mutation 是唯一会真正同步发生改变状况的表达式。Mutations 采用URLcommit。

4. Getters

Getters能被认为是计算过的属性，如果被用来从状况中获得两个修改过的响应。

两个简单的Vuex store 的例子如下所示：

const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit(increment) } } })

采用 store

在处理上述问题时，两个模块一般来说会初始化dispatchcommit。

这意味着两个模块能通过初始化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 的组织工作相同。这些表达式是发生改变状况的唯一方

与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.ts import { 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)

：

https://betterproramming.pub/testig-pinia-is-vuex-out-43e0531824f5