前端状态管理到底需不需要：从 props 传递到 Pinia

前端新手比较容易走的极端的，要么所有数据都塞进全局 Store，要么死活不用、层层 props 传到手软。状态管理不是炫技，是用来解决"数据在哪、谁改它"的问题。这篇聊聊什么时候该用、什么时候纯属添乱。

一、props 传递的痛点在哪

组件层级浅时，父传子 props 最直观。但一旦层级深了，中间组件只是"过路"也要声明一遍 props，改个字段全线联动——这叫 prop 透传地狱：

<!-- 父 → 子 → 孙，中间层纯粹在传话 -->
<Child :user="user" />
<!-- Child 里又要 <GrandChild :user="user" /> -->

这时候把 user 放进 Store，谁要用谁直接拿，中间层就解脱了。

二、Pinia：Vue 生态的官方答案

Vue 项目里，Pinia 是现在的标准。定义一个 store 很简单：

// stores/user.js
import { defineStore } from 'pinia';

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

组件里直接用，不用一层层传：

<script setup>
import { useUserStore } from '@/stores/user';
const user = useUserStore();
user.login('张三'); // 任意组件改，全局生效
</script>

三、但别什么都往里塞

最典型的反面教材：把一个"只在当前弹窗里用"的开关也塞进全局，结果全局状态里一堆没人记得干嘛的字段。

小结

判断要不要用状态管理，就看一句话：这个数据是不是多个不相邻的组件都要用、且会被改。是，就用 Store；只是在父子之间传，props 就够了。Pinia 这类工具是解药，不是万金油——小项目克制一点，反而更清爽。等组件真的多到传不动了，再引入也不迟。