Vue——Vue3 + Vite 状态管理篇 之【Pinia 状态管理架构】

背景问题：
需要管理应用的全局状态。

方案思考：
使用 Pinia 作为状态管理工具。

具体实现：
创建 Pinia 实例：

// stores/index.js
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from '@/stores'

const app = createApp(App)
app.use(pinia)
app.mount('#app')

用户状态管理 Store 示例：

// stores/user.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
// 定义状态
const userInfo = ref({})
const isLoggedIn = ref(false)
const permissions = ref([])

// 定义计算属性
const hasPermission = computed(() => {
return (permission) => {
return permissions.value.includes(permission)
}
})

// 定义动作
const setUser = (user) => {
userInfo.value = user
isLoggedIn.value = !!user
}

const setPermissions = (perms) => {
permissions.value = perms
}

const clearUser = () => {
userInfo.value = {}
isLoggedIn.value = false
permissions.value = []
}

const updateProfile = (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.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
// 侧边栏状态
const sidebar = ref({
opened: true,
withoutAnimation: false
})

// 设备类型
const device = ref('desktop')

// 全屏状态
const fullscreen = ref(false)

// 切换侧边栏
const toggleSidebar = (withoutAnimation) => {
sidebar.value.opened = !sidebar.value.opened
sidebar.value.withoutAnimation = withoutAnimation
}

// 关闭侧边栏
const closeSidebar = (withoutAnimation) => {
sidebar.value.opened = false
sidebar.value.withoutAnimation = withoutAnimation
}

// 切换设备
const toggleDevice = (deviceType) => {
device.value = deviceType
}

// 切换全屏
const toggleFullscreen = () => {
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
}
})