Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 5️⃣我的页面开发

一、我的页面开发

二、自定义hooks-useAuth 实现登录页面逻辑

• 前端在用户登录时 useAuth 的 login 函数给后端发送登录请求
• 后端根据用户账号密码登信息，校验成功后，返回用户信息以及对应token
• 前端拿到用户信息和 token 后，使用 useUserStore 和useLocalStorage分别保存到store和localStatorage中
• 当前端需要判断用户登录状态时，就会读取 store 信息，以及发送需要鉴权的请求时，自动带上token 信息

三、自定义hooks-useUserStore 使用 Pinia 实现用户状态管理

• pinia (相较于vuex：更简洁直接的 API；组合式风格的 API；更完善的类型推导)
• vue 官方提供的一个拥有组合式 API 的 Vue 状态管理库
• 允许你跨组件或页面共享状态【更强的团队协作约定；与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试；模块热更新(HMR)；服务端渲染支持】

• state 是 store 的数据(data) 【ref】
• getters 是 store 的计算属性(computed) 【computed】
• actions 是方法(methods) 【function】

四、自定义hooks-useLocalStorage 保存用户状态信息

• localStorage 和 sessionStorage
  
• localStorage 适合持久化缓存数据，比如页面的默认偏好配置等sessionStorage 适合一次性临时数据保存