vue pinia

小飞侠在吗2025-12-10 11:06

Pinia 是 Vue 的官方状态管理库，专为 Vue 3 设计，旨在简化状态管理流程。以下是其核心特点与使用方法：

1. ‌核心优势‌

‌轻量高效‌：Pinia API 简洁，体积小，性能优越。
‌组合式 API 支持‌：天然兼容 Vue 3 的组合式 API，Vue 2 也支持。
‌模块化设计 ‌：通过 defineStore 创建独立的 Store 模块，便于管理复杂应用状态。

2. ‌核心概念‌

‌Store ‌：状态容器，包含 state、getters 和 actions 三部分：
- state：存储数据（如 count: 0）。
- getters：计算属性（如 doubleCount）。
- actions：同步/异步方法（如 increment）。

3. 搭建pinia环境

复制代码

npm install pinia

操作src/main.ts

复制代码

import { createApp } from 'vue'
import App from './App.vue'
/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'

import router from './router/index'
/* 创建pinia */
let pinia = createPinia();
let app = createApp(App)
/*  挂载pinia */
app.use(pinia)
app.use(router)
app.mount('#app')

// 定义 Store
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } }
})

// 使用 Store
const counter = useCounterStore()
counter.increment()
console.log(counter.count) // 输出: 1

4. ‌模块化与持久化‌

‌模块化 ‌：通过命名空间区分不同功能模块（如 user.js、shop.js）。
‌持久化 ‌：结合 vueuse 的 useLocalStorage 实现数据持久化。

5. ‌与 Vuex 的对比‌

Pinia 是 Vuex 的简化版，API 更直观，推荐 Vue 3 项目使用。

‌总结‌：Pinia 提供了 Vue 专属的状态管理解决方案，简化了状态共享与持久化，是 Vue 3 项目中的理想选择。