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 修改部分

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const username = ref('')
const password = ref('')
const router = useRouter()
const userStore = useUserStore()

const handleLogin = () => {
    if (username.value === 'w' && password.value === '1') {
        localStorage.setItem('token', 'fake-token')
        userStore.setUser(username.value, 'fake-token')
        router.push('/home')
    } else {
        alert('用户名或密码错误')
    }
}
</script>

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

<template>
  <div class="container">
    <div class="header">
      <h2>微头条首页</h2>
      <div>欢迎，{{ userStore.username }}</div>
      <button @click="logout">退出登录</button>
    </div>
    <!-- 其余代码不变 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()
// ... 其他代码不变

const logout = () => {
  userStore.logout()
  router.push('/login')
}
</script>