Vue 3 与 Pinia 状态管理教程

2025/5/7 15:33:43 来源：https://blog.csdn.net/wscfan/article/details/144172806 浏览: 次关键词：Vue 3 与 Pinia 状态管理教程

Vue 3 与 Pinia 状态管理教程

Pinia简介

Pinia是Vue 3生态系统中的现代状态管理库，相比Vuex有以下优势：

更轻量级
完整的TypeScript支持
模块化设计
直观的API
更好的代码组织

安装与配置

安装Pinia

使用npm安装：

npm install pinia

使用yarn安装：

yarn add pinia

项目配置

在main.ts或main.js中引入并使用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.mount('#app')

核心概念

State（状态）

State是store的核心，定义了应用的数据状态。

Getters（计算属性）

类似于计算属性，可以derived当前状态的新状态。

Actions（动作）

处理业务逻辑和状态变更的方法。

创建与使用Store

基本Store示例

// stores/counter.ts
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {// 状态state: () => ({count: 0,name: 'John Doe'}),// 计算属性getters: {doubleCount(): number {return this.count * 2},fullName(): string {return `User: ${this.name}`}},// 动作actions: {increment() {this.count++},decrement() {this.count--},resetCounter() {this.count = 0}}
})

在组件中使用Store

<template><div><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">+</button><button @click="counter.decrement">-</button></div>
</template><script setup>
import { useCounterStore } from '@/stores/counter'// 获取store实例
const counter = useCounterStore()
</script>

高级特性

持久化存储

使用pinia-plugin-persistedstate实现状态持久化：

npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

组合式API风格Store

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', () => {// 状态const username = ref('')const isLoggedIn = ref(false)// 计算属性const greeting = computed(() => `Hello, ${username.value}`)// 动作function login(name: string) {username.value = nameisLoggedIn.value = true}function logout() {username.value = ''isLoggedIn.value = false}return { username, isLoggedIn, greeting, login, logout }
})