Pinia学习：在Router的基础上加入Pinia

Pinia介绍
Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据或者更新数据。

本章节我们要介绍的是 Vue3 官方推荐的状态管理库 —— Pinia，相比 Vuex，Pinia 提供了更简洁、更符合 Vue3 组合式 API 思维的状态管理方案。

下图对比了两者的结构差异：

Vuex 采用单仓库加多级模块的树状结构，层级固定，依赖 mutations，整体更重。
Pinia 则由多个独立 store 组成，扁平、轻量、不分模块，无命名空间负担。

Pinia 核心特点：

支持 Vue2 和 Vue3
极简的 API 设计
完整的 TypeScript 支持
支持组合式 API
模块化设计，无需嵌套模块
Pinia 的扁平结构让组件可以直接连到任意 store，各取所需，不经过树状模块，也不走命名空间路径，状态流动简单直接，耦合度低。

步骤1：创建工程

步骤 2：创建 src/stores/user.js

步骤 3：修改 main.js，注册 Pinia

步骤 4：修改 Login.vue，使用 store
导入 useUserStore，登录成功后调用 setUser。
Login.vue 修改部分

步骤 5：修改 Home.vue，使用 store
导入 useUserStore，显示 userStore.username。
退出调用 userStore.logout。