企业官网建设流程全解析

用动物做网站名,鄂州网站制作,中山专业网站建设公司,重点建设政协网站背景问题#xff1a; 需要管理应用的全局状态。 方案思考#xff1a; 使用 Pinia 作为状态管理工具。 具体实现#xff1a; 创建 Pinia 实例#xff1a; // stores/index.js import { createPinia } from piniaconst pinia createPinia()export default pinia// main.js i…背景问题需要管理应用的全局状态。方案思考使用 Pinia 作为状态管理工具。具体实现创建 Pinia 实例// stores/index.jsimport{createPinia}frompiniaconstpiniacreatePinia()exportdefaultpinia// main.jsimport{createApp}fromvueimportAppfrom./App.vueimportpiniafrom/storesconstappcreateApp(App)app.use(pinia)app.mount(#app)用户状态管理 Store 示例// stores/user.jsimport{defineStore}frompiniaimport{ref,computed}fromvueexportconstuseUserStoredefineStore(user,(){// 定义状态constuserInforef({})constisLoggedInref(false)constpermissionsref([])// 定义计算属性consthasPermissioncomputed((){return(permission){returnpermissions.value.includes(permission)}})// 定义动作constsetUser(user){userInfo.valueuser isLoggedIn.value!!user}constsetPermissions(perms){permissions.valueperms}constclearUser(){userInfo.value{}isLoggedIn.valuefalsepermissions.value[]}constupdateProfile(profile){Object.assign(userInfo.value,profile)}return{// 状态userInfo,isLoggedIn,permissions,// 计算属性hasPermission,// 动作setUser,setPermissions,clearUser,updateProfile}})在组件中使用 Store 的示例template div classuser-profile h2用户信息/h2 p姓名: {{ userStore.userInfo.name }}/p p邮箱: {{ userStore.userInfo.email }}/p p状态: {{ userStore.isLoggedIn ? 已登录 : 未登录 }}/p div v-ifuserStore.hasPermission(user.edit) el-button clickeditProfile编辑资料/el-button /div div v-else p您没有编辑权限/p /div el-button clicklogout typedanger退出登录/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}frompiniaimport{ref}fromvueexportconstuseAppStoredefineStore(app,(){// 侧边栏状态constsidebarref({opened:true,withoutAnimation:false})// 设备类型constdeviceref(desktop)// 全屏状态constfullscreenref(false)// 切换侧边栏consttoggleSidebar(withoutAnimation){sidebar.value.opened!sidebar.value.opened sidebar.value.withoutAnimationwithoutAnimation}// 关闭侧边栏constcloseSidebar(withoutAnimation){sidebar.value.openedfalsesidebar.value.withoutAnimationwithoutAnimation}// 切换设备consttoggleDevice(deviceType){device.valuedeviceType}// 切换全屏consttoggleFullscreen(){if(!document.fullscreenElement){document.documentElement.requestFullscreen()fullscreen.valuetrue}else{if(document.exitFullscreen){document.exitFullscreen()fullscreen.valuefalse}}}return{sidebar,device,fullscreen,toggleSidebar,closeSidebar,toggleDevice,toggleFullscreen}})