手写Pinia源码（上篇）- 了解和使用Pinia

Pinia简介

Pinia是Vue的专属状态库，不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。

Mutation已被弃用 ，只有 state, getter 和 action ，简化状态管理库。

Pinia官网

Pinia的使用

基本使用

1. 安装依赖

npm install pinia
# 使用yarn
yarn add pinia
# 使用pnpm
pnpm i pinia

2. 使用Pinia插件

src/main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

3. 创建Store

Option Store

src/store/counter.ts

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 1
  }),
  getters: {
    doubleCount(): number {
      return this.count * 2
    },
    tripleCount: state => state.count * 3
  },
  actions: {
    increment(payload: number) {
      this.count += payload
    }
  }
})

Setup Store

import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => {
    return count.value * 2
  })
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

4. 在组件中使用

src/App.vue

<script setup lang="ts">
import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
  countStore.increment(2)
}
</script>
<template>
  <p>{{ countStore.count }}</p>
  <button @click="handleClick">修改状态</button>
</template>

修改数据的方法

1. 通过action修改

store定义actions方法

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 1
  }),
  actions: {
    increment(payload: number) {
      this.count += payload
    }
  }
})

在组件中调用

import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
  countStore.increment(2)
}

2. 直接修改state中数据的状态

在组件中调用

import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
  countStore.count += 1
}

3. 使用$patchAPI

$patch可以接受一个对象或函数

import { useCounterStore } from '@/store/counter'
const countStore = useCounterStore()
const handleClick = () => {
  countStore.$patch({ count: 2 })
}
const handleClick2 = () => {
  countStore.$patch(state => (state.count += 2))
}

API

createPinia

创建一个 Pinia 实例，供应用使用。

defineStore

创建一个 useStore 函数，检索 store 实例。\

属性：

#id

store 的唯一标识符

#state

Store 的 State。给它赋值可替换整个 state。

方法：

$patch

将一个 state 补丁应用于当前状态。

// 对象
countStore.$patch({ count: 2 })
// 函数
countStore.$patch(state => (state.count += 2))

$reset

将 store 重设为初始状态。只在Option Store可用。

$subscribe

设置一个回调，当状态发生变化时被调用。返回删除侦听器的函数。

store.$subscribe((storeInfo, state) => {
  console.log(storeInfo, state)
})

$onAction

设置一个回调，当一个 action 即将被调用时，就会被调用。

store.$onAction(({ after, onError }) => {
 // 你可以在这里创建所有钩子之间的共享变量，
 // 同时设置侦听器并清理它们。
 after((resolvedValue) => {
   // 可以用来清理副作用 
   // `resolvedValue` 是 action 返回的值，
   // 如果是一个 Promise，它将是已经 resolved 的值
 })
 onError((error) => {
   // 可以用于向上传递错误
 })
})

手写Pinia源码（下篇）- 实现Pinia