在vue3里pinia的一些常规使用和实战

本文链接：https://blog.csdn.net/qq_38402726/article/details/130474670

本文介绍了如何安装和使用Pinia，一个Vue.js的状态管理库。通过`npminstallpinia`或`yarnaddpinia`安装后，利用`defineStore`创建store，包含state和actions。Pinia提供$reset()重置状态，$subscribe()订阅状态变化，以及在组件中使用和监听状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

首先，我们需要安装 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>