安装
首先，我们需要安装 pinia 包，可以使用 npm 或 yarn 进行安装：
npm install pinia
yarn add pinia
创建 pinia
通过 defineStore 函数来创建一个 pinia：
import {defineStore } from 'pinia'
export const myPinia = defineStore('myPinia',{
state: () => ({
count: 0
}),
actions: {
addCount() {
this.count++;
}
}
})
其中defineStore：
第一个参数为id，pinia 的唯一标识符，用于在多个 pinia 之间区分。state：pinia 的状态，必须是一个返回对象的函数。actions：pinia 的操作方法。
pinia一些自带方法
初始化pinia状态，还原pinia的state为初始化状态：pinia.$reset()
pinia.$subscribe 是 Pinia 提供的全局订阅 API，可以订阅 pinia 上的属性变化。该 API 返回一个取消订阅的函数。
使用方法如下：
const unsubscribe = pinia.$subscribe((mutation, state) => {
console.log('mutation:', mutation)
console.log('state:', state)
})//订阅监听
unsubscribe() // 取消订阅
该函数接受一个回调函数，回调函数接受两个参数：
-
mutation：表示 pinia 的属性已经发生了变化。它是一个对象，其中包含以下属性：type：类型为字符串，表示触发变化的操作名称。payload：表示变化的新值。
-
state：表示当前 pinia 的状态。这个值是一个对象，其中包含 store 中的所有属性及其值。
最后，当你需要停止监听时，只需要调用返回的取消订阅的函数即可。
在组件中单独使用 pinia
在单独组件内使用，引入pinia文件：``
<template>
<div>
Count: {{ pinia.count }}
<button @click="pinia.addCount"></button>
</div>
</template>
<script setup>
import { onUnmounted } from 'vue'
import { myPinia} from './pinia'
const pinia = myPinia()
// 初始化pinia状态，还原pinia的state为初始化状态
pinia.$reset()
const unsubscribe = pinia.$subscribe((mutation, state) => {
console.log('mutation:', mutation)
console.log('state:', state)
})//订阅监听
// 修改state部分属性
pinia.$patch((state) => { state.count= 2 })
// 修改state全部属性
pinia.$state = {count: 3}
onUnmounted(()=> {
unsubscribe() // 取消订阅
})
</script>
vue代码里监听 pinia的某个属性
我们可以使用 watch 函数或 watchEffect 函数来监听 pinia 的变化。
使用 watch 函数来监听 pinia 的变化：
<template>
<div>
Count: {{ pinia.count }}
<button @click="pinia.addCount"></button> </div> </template> <script setup>
import { watch } from 'vue'
import { myPinia} from './pinia'
const pinia = myPinia()
watch(() => pinia .count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
</script>
