Vue——Vue3 + Vite 状态管理篇 之【Pinia 状态管理架构】
背景问题：
需要管理应用的全局状态。
方案思考：
使用 Pinia 作为状态管理工具。
具体实现：
创建 Pinia 实例：
// stores/index.jsimport{createPinia}from'pinia'constpinia=createPinia()exportdefaultpinia// main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importpiniafrom'@/stores'constapp=createApp(App)app.use(pinia)app.mount('#app')用户状态管理 Store 示例：
// stores/user.jsimport{defineStore}from'pinia'import{ref,computed}from'vue'exportconstuseUserStore=defineStore('user',()=>{// 定义状态constuserInfo=ref({})constisLoggedIn=ref(false)constpermissions=ref([])// 定义计算属性consthasPermission=computed(()=>{return(permission)=>{returnpermissions.value.includes(permission)}})// 定义动作constsetUser=(user)=>{userInfo.value=user isLoggedIn.value=!!user}constsetPermissions=(perms)=>{permissions.value=perms}constclearUser=()=>{userInfo.value={}isLoggedIn.value=falsepermissions.value=[]}constupdateProfile=(profile)=>{Object.assign(userInfo.value,profile)}return{// 状态userInfo,isLoggedIn,permissions,// 计算属性hasPermission,// 动作setUser,setPermissions,clearUser,updateProfile}})在组件中使用 Store 的示例：
<template> <div class="user-profile"> <h2>用户信息</h2> <p>姓名: {{ userStore.userInfo.name }}</p> <p>邮箱: {{ userStore.userInfo.email }}</p> <p>状态: {{ userStore.isLoggedIn ? '已登录' : '未登录' }}</p> <div v-if="userStore.hasPermission('user.edit')"> <el-button @click="editProfile">编辑资料</el-button> </div> <div v-else> <p>您没有编辑权限</p> </div> <el-button @click="logout" type="danger">退出登录</el-button> </div> </template> <script setup> import { useUserStore } from '@/stores/user' const userStore = useUserStore() const editProfile = () => { console.log('编辑用户资料') // 编辑逻辑 } const logout = () => { userStore.clearUser() console.log('用户已退出') } </script>应用状态管理 Store 示例：
// stores/app.jsimport{defineStore}from'pinia'import{ref}from'vue'exportconstuseAppStore=defineStore('app',()=>{// 侧边栏状态constsidebar=ref({opened:true,withoutAnimation:false})// 设备类型constdevice=ref('desktop')// 全屏状态constfullscreen=ref(false)// 切换侧边栏consttoggleSidebar=(withoutAnimation)=>{sidebar.value.opened=!sidebar.value.opened sidebar.value.withoutAnimation=withoutAnimation}// 关闭侧边栏constcloseSidebar=(withoutAnimation)=>{sidebar.value.opened=falsesidebar.value.withoutAnimation=withoutAnimation}// 切换设备consttoggleDevice=(deviceType)=>{device.value=deviceType}// 切换全屏consttoggleFullscreen=()=>{if(!document.fullscreenElement){document.documentElement.requestFullscreen()fullscreen.value=true}else{if(document.exitFullscreen){document.exitFullscreen()fullscreen.value=false}}}return{sidebar,device,fullscreen,toggleSidebar,closeSidebar,toggleDevice,toggleFullscreen}})