Pinia 状态流（代码）：公共状态管理的实战范式与本质解耦

公共状态流的本质:跨模块的信息管理pinia的部分 app挂载pinia之后 可以直接通过defineStore去定义模块比如说user 然后里面的公共状态 我在其他模块使用用户信息的时候导入这个useUserStore示例直接去获取里面的信息1. 第一步在 Vue 应用中挂载 Pinia 根实例这是基础确保整个应用能识别 Pinia 的 Store// main.ts import { createApp } from vue import { createPinia } from pinia import App from ./App.vue // 创建 Pinia 根实例 const pinia createPinia() // 创建 Vue 应用实例 const app createApp(App) // 挂载 Pinia 到应用关键让所有组件都能使用 Pinia app.use(pinia) // 挂载应用 app.mount(#app)2. 第二步用defineStore定义 “用户模块” 的 Store通过defineStore定义一个独立的 “用户信息” 模块包含状态、计算属性、修改逻辑:// stores/user.ts通常集中放在 stores 目录下 //导入defineStore import { defineStore } from pinia // 定义并导出一个 user 模块的 Store export const useUserStore defineStore(user, { // 状态存储用户信息响应式 state: () ({ name: 张三, age: 20, token: , // 登录令牌 roles: [] // 权限角色 }), // 计算属性派生状态类似组件的 computed getters: { // 例如判断是否登录 isLogin: (state) !!state.token, // 例如拼接用户信息 userInfoStr: (state) ${state.name}-${state.age}岁 }, // 方法修改状态的逻辑支持同步/异步 actions: { // 登录异步获取 token 并更新状态 async login(username: string, password: string) { // 模拟接口请求 const res await fetch(/api/login, { method: POST, body: JSON.stringify({ username, password }) }) const data await res.json() // 直接修改状态Pinia 允许在 actions 中直接修改 state this.token data.token this.name data.name }, // 退出登录清空状态 logout() { this.token this.name this.roles [] } } })Pinia 中 action 和 getter 的核心作用getters核心作用是基于 state 派生出新的响应式数据(类似Vue的computed)并具有缓存能力。action核心作用是 封装“修改状态的逻辑”和“业务处理逻辑”是唯一允许直接修改 state 的地方同时支持同步/异步操作还能实现逻辑复用注意在这里值得一提的是--Pinia 有两种定义仓库风格的方式(选项式 api 和组合式 api)上述是选项式 api 的方法而在组合式 api 里很大概率不显式声明action 的字段在这种情况下函数本身就是“actions”而当没有显式的 getters 字段的时候是但当前业务场景中没有这类固定的派生需求所以不需要派生状态3.第三步在其他组件 / 模块中使用 “用户模块” 的状态无论在组件、工具函数还是其他业务模块中只要导入useUserStore并调用就能获取实例并访问状态!-- 任意组件如 Header.vue -- template div !-- 直接使用状态 -- p当前用户{{ userStore.name }}/p !-- 使用 getters -- p{{ userStore.isLogin ? 已登录 : 未登录 }}/p !-- 调用 actions -- button clickhandleLogin登录/button /div /template script setup langts // 导入用户模块的 Store 函数 import { useUserStore } from /stores/user // 调用函数获取 Store 实例单例 const userStore useUserStore() // 调用 actions 登录 const handleLogin async () { await userStore.login(admin, 123456) } /script