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：创建工程
npm creat vite
cd ./工程目录
npm install
npm intall vue-router
npm install pinia
步骤 2：创建 src/stores/user.js
Pinia有三部分：

state:存数据
gettters:算派生数据
actions:执行逻辑、修改state
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
state: () => ({
token: localStorage.getItem('token') || '',
username: localStorage.getItem('username') || ''
}),
actions: {
setUser(username, token) {
this.username = username
this.token = token
localStorage.setItem('username', username)
localStorage.setItem('token', token)
},
logout() {
this.username = ''
this.token = ''
localStorage.removeItem('username')
localStorage.removeItem('token')
}
}
})
步骤 3：修改 main.js，注册 Pinia
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)

const pinia = createPinia()

app.use(pinia)
app.use(router)
app.mount('#app')
步骤 4：修改 Login.vue，使用 store
导入 useUserStore，登录成功后调用 setUser。
Login.vue 修改部分

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

Pinia学习：在Router的基础上加入Pinia
Pinia介绍
步骤1：创建工程
步骤 2：创建 src/stores/user.js
步骤 3：修改 main.js，注册 Pinia
步骤 4：修改 Login.vue，使用 store
Login.vue 修改部分
步骤 5：修改 Home.vue，使用 store