Vue 教程：Pinia 状态管理实战——从定义 Store 到模块化组织

快速概述

Pinia 是 Vue 官方推荐的状态管理库，用于解决组件间共享状态（如用户信息、购物车数据）的同步与维护问题。它适用于中大型单页应用（SPA）以及需要跨组件通信的场景。使用 Pinia 前，请确保项目基于 Vue 3 且已安装 npm 或 yarn 等包管理器，并具备基本的 Vue 组件开发经验。

核心概念与原理

Pinia 的核心是 Store，它通过 defineStore 定义，内部包含 state（状态）、getters（计算属性）和 actions（方法）。与 Vuex 相比，Pinia 移除了 mutations，直接修改 state 更简洁，且天然支持 TypeScript。其响应式机制基于 Vue 3 的 reactive 和 ref，确保状态变化自动驱动视图更新。

实战步骤与代码

1. 安装与配置

npm install pinia

在 main.js 中注册 Pinia：

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

2. 定义第一个 Store

创建 stores/counter.js：

import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++; // 直接修改 state }, }, });

在组件中使用：

<template> <p>{{ store.count }} / {{ store.doubleCount }}</p> <button @click="store.increment()">增加</button> </template>

<script setup> import { useCounterStore } from './stores/counter'; const store = useCounterStore(); </script>

3. 模块化组织

当状态复杂时，按业务模块拆分 Store，例如用户模块：

// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  actions: {
    setUser(name, token) { this.name = name; this.token = token; },
  },
});

在组件中可同时引入多个 Store，实现逻辑分离与复用。

常见坑点与优化

• 未正确注册 Pinia：忘记在 main.js 中 app.use(createPinia()) 会导致“getActivePinia() was called”错误。
• 直接解构 state 丢失响应性：应使用 storeToRefs 解构，否则视图不会更新。
• 避免在 getter 中修改 state：getter 应保持纯函数，修改状态请使用 action。
• 模块化拆分：将不同业务的状态拆分为独立 Store，避免单一 Store 过大，提升可维护性。
• 性能优化：对于频繁更新的状态，考虑使用 shallowRef 或减少不必要的响应式包裹。

通过以上步骤，你可以快速上手 Pinia，并利用模块化组织构建清晰、可扩展的状态管理方案。