前端笔记-pinia状态管理

学习目标：

学习参考：044.准备一个效果_哔哩哔哩_bilibili

Pinia的配置可以查看官网文档：开始 | Pinia

一、对 Pinia 的理解

Pinia 是 Vue 3 官方推荐的状态管理库，相较于 Vuex，它的设计更简洁，基于 Vue 3 的 Composition API，在模块化、TypeScript 支持等方面表现出色。它能集中管理应用状态，方便组件间共享数据，提升开发效率与代码可维护性。

二、准备一个效果

可理解为在使用 Pinia 进行实际功能开发前的准备工作，比如构思要实现的状态管理效果，规划状态结构、数据交互逻辑等。为后续搭建环境、编写代码等具体开发步骤明确方向。

三、搭建 Pinia 环境

安装

使用包管理器（如 npm 或 yarn ）安装 Pinia：

• npm install pinia
• yarn add pinia

在项目中引入

在 Vue 3 项目的入口文件（如 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')

四、存储 + 读取数据

定义状态

在通过 defineStore 定义的 store 中，使用 ref 或 reactive 定义响应式状态。例如：

import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
export const useUserStore = defineStore('user', () => {
    const name = ref('')
    const userInfo = reactive({ age: 0 })
    return { name, userInfo }
})

读取数据

在组件中引入 store 后即可读取：

import { useUserStore } from '@/store/user'
const userStore = useUserStore()
console.log(userStore.name.value)
console.log(userStore.userInfo.age)

五、修改数据（三种方式）

直接修改

若状态用 ref 定义，通过 .value 修改；reactive 定义的状态直接修改属性。如：

import { useUserStore } from '@/store/user'
const userStore = useUserStore()
userStore.name.value = 'newName'
userStore.userInfo.age = 20

通过方法修改

在 store 的 actions 中定义方法修改状态：

export const useUserStore = defineStore('user', () => {
    const name = ref('')
    const userInfo = reactive({ age: 0 })
    function updateName(newName) {
        name.value = newName
    }
    function incrementAge() {
        userInfo.age++
    }
    return { name, userInfo, updateName, incrementAge }
})

批量修改

对于 reactive 状态，可使用 Object.assign 等方法批量修改：

import { useUserStore } from '@/store/user'
const userStore = useUserStore()
Object.assign(userStore.userInfo, { age: 25, address: 'newAddress' })

六、storeToRefs 的使用

storeToRefs 用于将 store 中的状态转换为独立的响应式引用。当从 store 解构出状态时，可避免失去响应式的问题。例如：

import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'
const { name, userInfo } = storeToRefs(useUserStore())
// 此时name和userInfo都是响应式引用

七、getters 的使用

getters 类似于 Vue 的计算属性，用于派生 store 中的状态，可进行缓存、计算等操作。在 store 中定义： 

export const useUserStore = defineStore('user', {
    state: () => ({
        age: 0
    }),
    getters: {
        doubleAge: (state) => state.age * 2
    }
})

在组件中读取：

import { useUserStore } from '@/store/user'
const userStore = useUserStore()
console.log(userStore.doubleAge)

八、$subscribe 的使用

$subscribe 用于订阅 store 中状态的变化，接收一个回调函数，当状态发生改变时执行。例如：

import { useUserStore } from '@/store/user'
const userStore = useUserStore()
userStore.$subscribe((mutation, state) => {
    console.log('状态发生变化', mutation, state)
})
// 后续对userStore状态的修改会触发此回调