开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vuex5——pinia -> 正文阅读

[JavaScript知识库]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"的存储
 }
}