Vuex5——pinia

---

前言

pinia 官网
pinia 是 Vuex 的升级版，被誉为 vuex5。官网也说过，为了尊重原作者，所以取名 pinia，而没有使用 Vuex。
关于 vuex 的学习请参阅此文。

pinia 是一种 状态管理 工具。它是 Vue 的存储库，它允许您跨组件/页面共享状态。

pinia 的优势、特点：

• pinia 中只有 state、getter、action，抛弃了 Vuex 中的 Mutation，使开发更简单。
• pinia 中 action 支持同步和异步，Vuex 中 action 中做异步处理，mutation 中做同步处理。
• pinia 支持 TypeScript。Vue3 推荐使用 TS 来编写，此时使用 pinia 就非常合适了。
• pinia 中每个 store 都是独立的，互相不影响。而 Vuex 中如果数据过多，通常需要分模块来进行管理。
• pinia 体积非常小，只有 1KB 左右。
• pinia 支持插件来扩展自身功能。
• pinia 支持服务端渲染。

一、安装使用 pinia

1、项目中安装 pinia

npm i pinia -S

2、将 pinia 绑定到 Vue 根实例上

import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

3、创建并使用一个 Store

在项目的 src 目录下新建一个 stores 文件夹，用于专门放置 pinia 的文件。

然后，在 stores 文件夹下新建一个 counter.ts 文件，在该文件中创建一个 Store：

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中使用这个 Store：

<script lang="ts">
  import { useStore } from '@/stores/counter'

  export default {
    setup() {
      const store = useStore()
      return {
        // 您可以返回整个 store 实例以在模板中使用它
        store,
      }
    },
  }
</script>
<template lang="pug">
.number {{store.count}}
</template>

二、Pinia 成员

下文中的所有 store 都代指用户自定义的 Store 的实例，该 Store 实例的名字不是唯一的，可以自取。

1、state

• 默认情况下，通过 store 实例访问 state，可以直接读写。
• 通过 store.$reset() 方法可以将 state 重置为初始值。
• 除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改。
• 可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的
  组件，当组件卸载时，它们将自动删除，也可以配置将其保留。

2、getters

• Getters 属性的值是一个函数，接受 state 作为第一个参数，目的是鼓励使用箭头函数。
• 非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型。

3、actions

• 与 Gettes 一样可以通过 this 访问整个 store 实例
• Actions 可以是异步的或同步的，不管怎样，都会返回一个 Promise
• Actions 可以自由的设置参数和返回的内容，一切将自动推断，不需要定义 TS 类型
• 与 State 一样，可以通过 store.$onAction() 订阅 Actions，回调将在执行前触发，并可以通过参数 after() 和 onError() 允许在Action 决议后和拒绝后执行函数。同样的，订阅绑定的是当前组件。

三、Pinia 插件

Pinia 支持插件来扩展自身功能。可参阅官网 Pinia Plugins。

Pinia 插件的本质是一个 JavaScript 函数。该函数接收一个可选的参数 context。可以选择返回要添加到 store 的属性。

例如：

export function myPiniaPlugin(context) {
  context.pinia // 使用 `createPinia()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的 store
  context.options // 定义存储的选项对象传递给`defineStore()`
  // ...
}

使用 pinia.use() 可以将 Pinia 插件添加到 pinia 实例中去。

例如：

import { createPinia } from 'pinia'
const pinia = createPinia()
pinia.use(myPiniaPlugin)

四、Pinia API

本小节仅列取部分常用的 Pinia 函数。全部的请参阅 Pinia 官网 API 之函数。

1、createPinia

createPinia() 方法用于创建一个 Pinia 实例。返回这个 Pinia 实例。

2、defineStore

defineStore() 方法用于创建一个检索 store 实例的 useStore 函数。

defineStore() 方法可以接收 2 个参数：

• id：必选。store 的 id 。
• options：可选。定义 store 的选项。

3、mapActions

mapActions() 方法，通过生成要在组件的 methods 字段中铺开的对象，允许直接使用存储（store）中的操作（action），而不使用合成API (setup())。对象的值是操作（action），而键是结果方法的名称。

mapActions() 方法可以接收 2 个参数：

• useStore：要映射的存储。
• keyMapper：为 actions 定义新名称的对象。

例如：

export default {
  methods: {
    // 其他方法属性
    // useCounterStore 有两个操作（action），分别叫做 `increment` 和 `setCount`
    ...mapActions(useCounterStore, { moar: 'increment', setIt: 'setCount' })
  },
 
  created() {
    this.moar()
    this.setIt(2)
  }
}

4、mapState

mapState() 方法，通过生成要在组件的 computed 字段中展开的对象，以允许从一个没有使用组合式 API (setup()) 的 store 使用 state 和 getters 对象的值是状态 properties/getters ，而键是结果计算属性的名称。您也可以传递一个自定义函数，该函数将接收 store 作为其第一个参数。请注意，虽然它可以通过这个访问组件实例，但它不会识别类型。

mapState() 方法可以接收 2 个参数：

• useStore：要映射的存储。
• keyMapper：状态（state）属性或访问器（getter）的对象。

例如：

export default {
  computed: {
    // 其它计算属性
    // useCounterStore 有一个 state 属性叫做 `count` 和一个 getter 叫做 `double`
    ...mapState(useCounterStore, {
      n: 'count',
      triple: store => store.n * 3,
      // 注意如果我们想使用 `this` 则不能使用箭头函数
      custom(store) {
        return this.someComponentValue + store.n
      },
      doubleN: 'double'
    })
  },
 
  created() {
    this.n // 2
    this.doubleN // 4
  }
}

5、mapStores

mapStores() 方法，通过生成要在组件的 computed 字段中展开的对象，允许使用没有组合式API (setup())的存储。它接受 store 定义的列表。

mapStores() 方法可以接收 1 个参数：

• […stores]：要映射到对象的存储（store）列表。

例如：

export default {
 computed: {
   // 其它计算属性
   ...mapStores(useUserStore, useCartStore)
 },
 
 created() {
   this.userStore // id为"user"的存储
   this.cartStore // id为"cart"的存储
 }
}

6、storeToRefs

当使用 store 的过程中，如果直接对 store 进行解构，会破坏数据的响应，所以 pinia 提供了 storeToRefs 用来进行解构。

storeToRefs() 方法，用 store 的所有state、getters和 插件添加的（plugin-added）state、 属性（properties）创建一个引用对象。类似于toRefs()，但专门为 Pinia store 设计。

storeToRefs() 方法可以接收 1 个参数：

• store：用以提取 refs 的 store。

例如：

import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/store/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()

    // 可以解构actions
    const { increment } = counterStore

    const { count } = storeToRefs(counterStore)

    return {
      count,
      increment,
    }
  }
}

【推荐文章】
pinia源码

【参考文章】
Pinia 入门
一文搞懂pinia状态管理（保姆级教程）
Pinia基础知识
新一代状态管理工具，Pinia.js 上手指南
【精品】pinia详解
Pinia进阶：优雅的setup（函数式）写法+封装