安装
首先,我们需要安装 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的状态。这个值是一个对象,其中包含 pinia中的所有属性及其值。
最后,当你需要停止监听时,只需要调用返回的取消订阅的函数即可。
在组件中单独使用 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>