pinia 的使用（一）—— 基本介绍

官网地址：https://pinia.vuejs.org/

1、Pinia 介绍

一个全新的用于 Vue 的状态管理库。下一个版本的 Vuex，也就是 Vuex 5.0。

• Pinia最初是一个实验，目的是在2019年11月左右重新设计 Vue 状态管理在Composite API上的样子，也就是下一代 Vuex：
  1. 之前的Vuex主要服务于Vue2，Options API
  2. 如果想要在Vue3中使用Vuex，需要使用 4.x 版本：只是一个过渡的选择，还有很大的缺陷
  3. 所以在Vue3伴随着Composition API诞生之后，也设计了全新的Vuex：Pinia，也就是Vuex5

① 核心特性

1. Vue2和Vue3都支持
2. 除了初始化安装和SSR配置之外，两者的API都是相同的：官方文档中主要针对Vue3进行说明，必要的时候会提供Vue2的注释
3. 支持VueDevTools
4. 跟踪actions、mutations的时间线：在使用容器的组件中就可以观察到容器本身
5. 支持time travel (时间旅行) 更容易的调试功能：在Vue2中Pinia使用Vuex的现有接口，所以不能与Vuex一起使用
6. 但是针对Vue3中的调试工具支持还不够完美，比如还没有time-travel调试功能
7. 模块热更新
8. 无需重新加载页面即可修改您的容器：热更新的时候保持任何现有状态
9. 支持使用插件扩展Pinia功能
10. 相比Vuex有更好完美的TypeScript支持
11. 支持服务端渲染

② 核心概念

• Pinia从使用角度和之前的Vuex几乎是一样的，比Vuex更简单了。
• 在Vuex中有四个核心概念：State、Getters、Mutations、Actions
• 在Pinia中：State、Getters、Actions (同步异步都支持)
• Store（如 Pinia）是一个保存状态和业务逻辑的实体，它不绑定到您的组件树。换句话说，它承载全局 state。它有点像一个始终存在的组件，每个人都可以读取和写入。它有三个核心概念。

Ⅰ. state

类似组件的 data ，用来存储全局状态

{
  todos: [
    { id: 1, title: '吃饭', done: false },
    { id: 1, title: '吃饭', done: true },
    { id: 1, title: '吃饭', done: false }
  ]
}

Ⅱ. getters

类似组件的 computed，根据已有 State 封装派生数据，也具有缓存的特性

doneCount () {
  return todos.filter(item => item.done).length
}

Ⅲ. actions

类似组件的 methods，用来封装业务逻辑，同步异步都可以；在 Vuex 中同步操作用 mutations，异步操作用 actions，太麻烦！！！

Ⅳ. 提示：Pinia 中没有 mutations。

③ 基本示例

1. 这就是在 API 方面使用 pinia 的样子（请务必查看入门以获取完整说明）。您首先创建一个 store：

   // stores/counter.js
   import { defineStore } from 'pinia'
   
   export const useCounterStore = defineStore('counter', {
     state: () => {
       return { count: 0 }
     },
     // could also be defined as
     // state: () => ({ count: 0 })
     actions: {
       increment() {
         // 在 Vuex 中我们需要搞两步：1. 定义 mutations 2. 提交 mutations
         this.count++
       },
     },
   })
   

2. 然后在组件中使用它：

   import { useCounterStore } from '@/stores/counter'
   
   export default {
     setup() {
       const counter = useCounterStore()
   
       counter.count++
       // with autocompletion ✨
       counter.$patch({ count: counter.count + 1 })
       // or using an action instead
       counter.increment()
     },
   }
   

3. 您甚至可以使用函数（类似于组件setup()）为更高级的用例定义 Store：

   export const useCounterStore = defineStore('counter', () => {
     const count = ref(0)
     function increment() {
       count.value++
     }
   
     return { count, increment }
   })
   

4. 如果你仍然不熟悉setup()Composition API，别担心，Pania 也支持类似Vuex 的一组地图助手。您以相同的方式定义商店，但随后使用mapStores()， mapState()，或mapActions()：

   const useCounterStore = defineStore('counter', {
     state: () => ({ count: 0 }),
     getters: {
       double: (state) => state.count * 2,
     },
     actions: {
       increment() {
         this.count++
       }
     }
   })
   
   const useUserStore = defineStore('user', {
     // ...
   })
   
   export default {
     computed: {
       // other computed properties
       // ...
       // gives access to this.counterStore and this.userStore
       ...mapStores(useCounterStore, useUserStore)
       // gives read access to this.count and this.double
       ...mapState(useCounterStore, ['count', 'double']),
     },
     methods: {
       // gives access to this.increment()
       ...mapActions(useCounterStore, ['increment']),
     },
   }
   

5. 您将在核心概念中找到有关每个地图助手的更多信息。

④ Pinia vs Vuex

• Pinia试图尽可能接近Vuex的理念。它旨在测试Vuex下一次迭代的提案，并且取得了成功，因为我们目前有一个针对Vuex5的开放式 RFC，其API与Pinia使用的 API 非常相似。请注意，Pinia的作者I (Eduardo) 是Vue.js核心团队的一员，并积极参与Router和Vuex等API的设计。我个人对这个项目的意图是重新设计使用全局Store的体验，同时保持 Vue 平易近人的哲学。我让Pania的API与Vuex一样接近，因为它不断向前发展，使人们可以轻松地迁移到Vuex，甚至在未来融合这两个项目（在Vuex下）。
• 关于版本问题：
  1. Vuex 当前最新版本是 4.x
  2. Vuex 4 用于 Vue 3
  3. Vuex 3 用于 Vue 2
  4. Pinia 当前最新版本是 2.x
  5. 既支持 Vue 2 也支持 Vue 3
• Pinia 可以认为就是 Vuex 5，因为它的作者是官方的开发人员，并且已经被官方接管了。
  • 有两种可能（个人猜测）：
    1. 把 Pinia 合并到 Vuex 中作为 Vuex 5.x
    2. 两个仓库独立发展，官方会推荐使用 Pinia
• 我给大家的建议就是：可以直接去使用 Pinia。
• Pinia API 与 Vuex ≤4 有很大不同，即：
  1. 没有 mutations 。mutations 被认为是非常冗长的。最初带来了 devtools 集成，但这不再是问题。
  2. 不再有模块的嵌套结构。 您仍然可以通过在另一个 store 中导入和使用 store 来隐式嵌套 store，但 Pinia 通过设计提供扁平结构，同时仍然支持 store 之间的交叉组合方式。您甚至可以拥有 store 的循环依赖关系。
  3. 更好typescript支持。 无需创建自定义的复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能地利用 TS 类型推断。
  4. 不再需要注入、导入函数、调用它们，享受自动补全！
  5. 无需动态添加 stores，默认情况下它们都是动态的，您甚至不会注意到。 请注意，您仍然可以随时手动使用 store 来注册它，但因为它是自动的，所以您无需担心。
  6. 没有命名空间模块。 鉴于 store 的扁平架构，“命名空间” store 是其定义方式所固有的，您可以说所有 stores 都是命名空间的。
• Pinia 就是更好的 Vuex，建议在你的项目中可以直接使用它了，尤其是使用了TypeScript 的项目。

⑤ 关于名字

• Pinia（发音/peenya/为英语）是最接近piña（西班牙语中的pineapple）的词，它是一个有效的包名。菠萝实际上是一组独立的花朵，它们结合在一起形成多种水果。与 stores 类似，每家 store 都是独立诞生的，但最终都联系在一起。它也是一种原产于南美洲的美味热带水果。

⑥ 关于作者

认识 Vue.js 开发团队。