Pinia 试图尽可能接近 Vuex 的理念

• Pinia 试图尽可能接近 Vuex 的理念。它旨在测试 Vuex 下一次迭代的提案，并且取得了成功，因为我们目前有一个针对 Vuex 5 的开放 RFC，其 API 与Pinia 使用的 API 非常相似。Pinia 的作者 I (Eduardo) 是 Vue.js 核心团队的一员，并积极参与 Router 和 Vuex 等 API 的设计。我个人对这个项目的意图是重新设计使用全局 Store 的体验，同时保持 Vue 平易近人的哲学。我让 Pania 的 API 与 Vuex 一样接近，因为它不断向前发展，使人们可以轻松迁移到 Vuex，甚至在未来融合这两个项目（在 Vuex 下）。
• 虽然 Vuex 通过 RFC 从社区收集尽可能多的反馈，但 Pania 没有。我根据我在开发应用程序、阅读其他人的代码和在 Discord 上回答问题的经验来测试想法。这使我能够提供一个有效的解决方案，经常发布，并在人们使用它时通过在主要版本中进行重大更改（在第一个稳定版本后不太可能进行重大更改）（如有必要）来改进它。

与 Vuex 3.x/4.x 对比#

• Vuex 3.x 是 Vue 2 的 Vuex 而 Vuex 4.x 是 Vue 3
• Pinia API 与 Vuex ≤4 有很大不同，即：

• • 突变不再存在。他们经常被认为非常冗长。他们最初带来了 devtools 集成，但这不再是问题。
  • 无需创建自定义的复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能地利用 TS 类型推断。

• • 不再需要注入、导入函数、调用它们，享受自动补全！
  • 无需动态添加商店，默认情况下它们都是动态的，您甚至不会注意到。请注意，您仍然可以随时手动使用商店来注册它，但因为它是自动的，所以您无需担心。

• • 不再有模块的嵌套结构。您仍然可以通过在另一个商店中导入和使用商店来隐式嵌套商店，但 Pinia 通过设计提供扁平结构，同时仍然支持商店之间的交叉组合方式。
  • 没有命名空间模块。鉴于商店的扁平架构，“命名空间”商店是其定义方式所固有的，您可以说所有商店都是命名空间的。

安装使用

• yarn add pinia@next
• npm install pinia@next

• 该版本与Vue 3兼容，如果你正在寻找与Vue 2.x兼容的版本，请查看v1分支

使用

mian.ts/mian.js引入

• import { createPinia } from'pinia'
• app.use(createPinia())

• 

• src文件夹下创建一个存放仓库的文件夹

• 

文件中使用

• 在深入研究核心概念之前，我们需要知道 store 是使用定义的defineStore()，并且它需要一个唯一的名称，作为第一个参数传递：
• 一旦实例化，你可以访问定义的任何财产state，getters以及actions直接在店里

• 

• 这个名称，也称为id，是必要的，Pinia 使用它来将商店连接到开发工具。将返回的函数命名为use...是一种跨可组合的约定，以使其使用惯用语。

state

创建state

• 

使用state

• 直接引入定义好的文件，然后执行抛出的方法
• pinia完全支持typescript，无需创建自定义的复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能地利用 TS 类型推断。

• 

  

注意store是一个用包裹的对象reactive，这意味着不需要.value在 getter 之后写入，但是，就像props在 中一样setup，我们无法对其进行解构

storeToRefs() 解构state

• 为了在保持其反应性的同时从存储中提取属性，您需要使用storeToRefs(). 它将为任何反应性属性创建引用。当您仅使用 store 中的状态但不调用任何操作时

• 

  

直接读写

• 默认情况下，您可以通过store实例访问状态直接读写状态，但不会影响仓库原有值

• 

• 不会影响仓库中原来的值

• 

$reset(）重置状态

• 可以通过调用store 上的方法将状态重置为其初始值$reset()：
• 需要搭配action来操作state中的值发生变化，在此只展示用法

• 

• 

state响应式

• 在组件中使用到state时，尽量使用computed包裹，因为setup只会执行一次，如果直接 const counter = store.counter的话，只会拿到第一次初始化的值，如果数据发生变化不会更新
• 使用computed的话，一旦数据发生改变数据就会改变，而且computed自带数据缓存

• 

直接改变状态

• 这里直接引入官网的说明，因为本人觉得直接操作state中的数据难以维护

• 

更换state

• 可以通过将商店的$state属性设置为新对象来替换商店的整个状态
• store.$state = { counter: 666, name: 'Paimon' }

getters

• Getter 完全等同于 Store 状态的计算值。它们可以用 中的getters属性定义defineStore()。他们收到state作为第一个参数来鼓励使用箭头函数

• 

getter使用this

• 大多数情况下，getter 只会依赖状态，但是，他们可能需要使用其他 getter。
• 正因为如此，我们可以通过定义一个常规函数来访问整个 store 实例，但是需要定义返回类型的类型（在 TypeScript 中）。

• 这是由于 TypeScript 中的一个已知限制，并且不会影响使用箭头函数定义的 getter 或不使用的 getter：

• 

• 直接使用this需要定义返回类型，如果不定义返回类型会报错

• 

访问gettes

• 可以直接在 store 实例上访问 getter

• 

  

• 可以使用computed包裹

• 

访问其他 getter

• 与计算属性一样，您可以组合多个 getter。通过 访问任何其他 getter this。即使您不使用 TypeScript，您也可以使用JSDoc提示您的 IDE 类型：
• 定义一个user仓库文件

• 

• index文件中引入user仓库

• 使用

• 

• 

actions

• 这里与 Vuex 有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions，这是一项重大的改变。
• Pinia 让 Actions 更加的灵活

• 可以通过组件或其他 action 调用
• 可以从其他 store 的 action 中调用

• 直接在商店实例上调用
• 支持同步或异步

• 有任意数量的参数
• 可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）

• 可以 $patch 方法直接更改状态属性

• 

  

• 使用

•