Pinia实例API

$reset

$reset方法用于重置store到初始状态，其实也可以说是将store中的state所有的状态的值重置为初始值。

例如：

store/modules/user.ts：

import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'

export const useUserStore = defineStore(StoreNames.USER, {
  // 定义全局共享状态的一个初始化状态
  state: () => ({
    like: ''
  }),
  // actions类似于methods，可以有同步和异步方法，修改state中的状态
  actions: {
    setLike() {
      this.like = 'jk'
    }
  }
})

// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
  return useUserStore(store)
}

App.vue：

<template>
  <div>
    <div>{{ like }}</div>
    <button @click="change">change</button>
    <button @click="resetUserStore">重置userStore的state中的状态</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

const { like } = storeToRefs(userStore)

// 调用setLike action方法，修改like的值
const change = () => {
  userStore.setLike()
}

// 重置userStore的state中的状态
const resetUserStore = () => {
  userStore.$reset()
}
</script>

<style lang='scss' scoped></style>

我们点击change按钮，like的值会变为jk;

当我们点击重置userStore的state中的状态按钮后，like的值就会重置为'';

订阅state的改变（$subscribe）

只要有state中有任意的状态发生了变化，就会调用这个函数，$subscribe函数接收两个参数，第一个参数是一个函数，第二个参数为可选参数是一个对象。

语法：

pinia实例.$subscribe((args, state) => {
    console.log('args', args)
    console.log('state', state)
}, { detached: true })

通过打印可以看到，第一个参数args是一个对象，可以从中获取当前store的一个id等等...，第二个参数state其实就是store中的state。

当第二个参数对象中的detached设置为true时，表示组件卸载之后任继续调用 $subscribe。

订阅Actions的调用（$onAction）

只要actions中的任意一个方法被调用就会执行这个函数，$onAction接收两个参数，第一个参数是一个函数，第二个参数是一个布尔值，。

使用方式：

pinia实例.$onAction((e) => {
    console.log('e', e)
})

e.after((resolvedValue) => {})：侦听器，可以用来清理副作用。它是一个函数，接收一个函数类型的参数，在 $onAction运行之后调用。

e.args：传递给 action 的参数

e.onError((error) => {})：是一个函数，接收一个为函数类型的参数，可以用于捕获错误。

e.name：被调用的 action 的名称

e.store：被调用 action 所在的 store