【九月打卡】第12天+学习主题替换方案

课程名称：基于Vue3，打造前台+中台通用提效解决方案
课程章节：第9章 主题替换解决方案 —— 打造完善多主题系统
主讲老师：Sunday
课程链接：https://coding.imooc.com/class/chapter/577.html#Anchor

课程内容：

今天学习的内容包括：

• 主题替换原理
• tailwind DarkMode原理
• 为组件田间dark适配
• DarkMode在复杂应用中的实现
• 跟随系统的主题变更

课程收获：

响应式下navigationBar实现方案分析

• 一套代码处理多端
  • 耦合太强
• 多套代码处理多端
  • 产生太多重复逻辑
• 抽离公用逻辑
  • 封装私有逻辑

抽离公用逻辑，封装系列动作

• 数据
  • 统一抽到vuex
  • vue3 createStore导入
• 视图
  • 拆分处理

pc端navigationBar私有试图处理

正常拆分编写

pc端navigationBar私有逻辑处理

1. 切换状态处理
2. 选中状态处理

分析处理navigation闪烁问题

1. 前台闪烁问题不可容忍（影响用户）
2. 做缓存
   1. 不用 手写
   2. vuex-persistedstate库自动缓存vuex数据，并且下次自动读取
      1. 版本4.1.0

课程学习截图