// Vuex-持久化？
// 不用插件：
// 1.成功获取token，一式两份，一份存入vuex，一份存入本地localstory cookie。
// 2.vuex中state初始化时，'优先'从本地取
// state: {
//   token:getItem('token') || ''
// }

// 使用插件：
// 1.安装`vuex-persistedstate` 插件
// 2.vuex中准备`user模块`和`cart模块`
// 3.将插件配置到vuex/store/index.js的`plugins`选项中，使得user模块和cart模块状态持久化
// Plugins:{
//     // 注册插件
// }
// 在响应式数据变化时，进行自动化同步到本地
// **插件说明**
//   1.默认是存储在localStorage中
//   2.key是存储数据的键名
//   3.paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token`
//   4.修改state后触发才可以看到本地存储数据的的变化

// axios封装处理？
// 1.安装 axios
// 2.新建 `src/utils/request.js` 模块
// 3.添加基础配置
// 1.实例化
// axios.create({
//   baseURL,
//   timeout: 5000
// })
// 2.请求拦截器
//   全局注入token
// 3.响应拦截器
//   1.token失效 401
//   2.接口不按照常规状态码返回时，可以自定义容错 ---- (面试加分项)
// ---大数问题？
// 因为1.超过了js本身处理的范围；2.JSONParse方法处理了

// 调试工具配置-针对vue3开发调试环境？
// 1. Dev-tools安装--官方调试工具适配vue3的版本
// 2. Logger Plugin 安装

// less自动化导入？
// 解决了问题：
// 避免多个.vue文件每次使用less通用的变量或方法，都需要单独引入的话题。
// 如何使用：
// 1.安装插件(vue-cli的插件)--style-resources-loader
// 2.文件vue-config.js中自动写入配置代码
// 3.在patterns配置项中加入我们想自动导入的less文件
// 4.配置完毕，重启项目，就可以在每一个.vue直接使用less文件中的变量
// 注意：安装时，尽量关闭vscode，避免由于其他应用占用文件，导致写入失败

// Layout组件抽离？
// 1.组件就近维护原则
// components  img等文件
// 好处：路径查找方便、维护方便、删除时方便
// 2.组件命名上：
// Home
//   index.vue
//   components
//     home-top.vue
//     home-top-nav.vue
//     home-banner.vue
// 3.组件使用上：
/* <HomeNav/> */
// /* <HomeNav></HomeNav> */  --符合浏览器解析

// 基于vuex管理数据的流程？
// 1.定义模块，然后在index.js中的modules配置项中组合起来
// 2.定义state数据-->定义修改数据的mutations-->定义异步请求+提交mutation的action函数(开启命名空间)
// 3.组件中触发action函数完成数据的修改(逆向的过程)
// 4.组件消费我们更新之后的数据
//   (devtools调试工具--mutations和state的关系)

// 吸顶交互？
// 组件逻辑：
// 监听页面滚动事件在事件回调函数中，判断当前滚动的距离。如果超过某个值，顶部组件显示；否则隐藏。
// vue2版本：
// 事件+回调函数+判断
// window.addEventListener('scroll', () => {
//   if (scrollTop > 78) {
//     this.showFlag = true
//   } else {
//     this.showFlag = false
//   }
// })

// vue3版本：
// 1.插件vueUse/core
// 2.封装了大部分业务场景可以复用的逻辑组合
// 3.引入插件useWindowscroll
// 4.使用
//   const { x, y } = useWindowScroll()
// x,y 响应式的。x代表横轴滚动距离；y纵轴滚动距离

// 分类数据获取？
// 1.vuex
// 数据 state getters  -> computed
// 行为方法：mutations actions -> methods
// computed中会渲染2次数据：1是最开始定义的空数组；2是计算后重新获取的值--真数据。而setup函数只能执行1次。
// 2.map
// 映射
// 原数组在保持数组个数不变的情况下，返回一个基于每一项处理之后的新数组
// map/filter/reduce不会改变原数组
// find/findIndex

// 鼠标移除layer展示?
// 鼠标移入显示当前对应的所有推荐
// 基础布局后;添加鼠标移入事件,记录当前id;计算属性得到当前的数据(find);渲染模板

// 骨架组件封装-自定义？
// * UI组件
// * 1.搭建一个最基础的静态组件
// * 2.考虑哪些属性可以由用户自定义（宽、高、背景色）
// * 3.定义具体的props传入（类型、默认值、是否必须）
// * 4.静态改动态。另一组件内测试使用

// 如何在setup中使用store实例？
// import { useStore } from 'vuex'
// setup() {
//     const store=useStore()
//     store.commit()
//     store.dispatch()
//     store.state.user.profile
// }

// 组件封装？
// 骨架屏组件：变化版的loading？
// 1.一个纯UI组件(只有样式，无内容)，提供数据返回之前的占位
// 2.把width/height/background等有价值需要的值设计成props
// 注：当props作为样式使用时，注意传入的值是合法的css值(比如width:20px加上单位)
// 优化：暴露给用户的是number类型，在内部做拼接处理

// 轮播图组件？
// 关键点：改变它的索引值
// 核心逻辑：
// 1.图片和操作按钮是一一对应的关系。
// 2.下标值必定是一一对应的。
// 点击按钮时，记录当前点击的下标值。然后通过下标值和图片的index做匹配，控制图片的显示。

// 封装思路：
// 1.基础的静态解构
// 2.实现按钮点击的交互效果
// 3.找到那些可能会根据用户传入的地方。
// 4.把需要自定义的地方设计成props
// 注:
// 1.注意index值最大范围(Sliders的长度-1)
// 2.及时清除定时器(销毁组件时,清除,不占用内存)

// 面板组件?
// 功能:提供一个通用的结构架子,支持自定义内容的传入.
// 思路:
// 1.纯文本的自定义部分,设计为props.
// 2.比较复杂的自定义模板,设计为插槽(具名+匿名)

// 查看更多组件?
// 功能:导航类组件.根据传入的path路径提供路由跳转功能
// 思考:如何让组件既支持内部路由跳转又支持三方url的跳转

// 分类数据获取?
// 通用思路:

// 第五天
// 组件数据懒加载？--面试问懒加载时可以加上
// 使用场景：
// 基础思路：监听组件是否已经进入到视口区域，只有进入之后才能发送网络请求(不再由生命周期钩子函数决定)
// 技术实现：
// 1.如何知道组件进入视口区域。useIntersectionObserver
// 2.在达到条件后，发送ajax请求
// 3.在数据首次加载后，立即结束监听
// 具体落地：封装函数(compositions/index.js)

// 图片懒加载？
// 使用场景：在页面中如果存在大量图片请求，同时请求可能会造成网络阻塞(最大6个)
// 基础思路：监听图片元素是否已经进入到视口区域：如果进入就正式发送图片请求(src="url")
// 技术实现：
// 1.使用 useIntersectionObserver监听图片是否进入视口区域
// 2.默认情况下都给src设置值。只有满足条件进入视口区域才赋值
// 3.图片渲染一次后停止监听
//   具体落地：全局指令的形式(directive/index.js;test)

// Day06
// 面包屑导航组件？
// 提供组件封装的思路
// 当要实现的一个功能很庞大，它是由多个小的独立功能聚合起来。然后我们通过使用拆分小组件对应小功能。
// 两个组件
// Bread：支持分隔符传入。如果传入，以传入的为主。
// BreadItem：支持用户自定义name；支持to属性传入，完成导航跳转。
// 跨组件通信时：
// provide/inject：完成在Item中使用Bread里的数据
// slot：支持自定义模板

// 关于路由功能？
// 1. setup中使用route或router实例
// import { useRoute, useRouter } from 'vue-router'
// const route = useRoute()  // 参数的使用  相当于this.$route
// const router = useRouter() // 方法使用  相当于this.$router

// 2. 路由缓存
// path不变的情况下，vue-router会选择就地复用组件。导致组件不会重新渲染，钩子函数不会再次执行，ajax不会再次请求发起
// 解决问题：
// 1.watch监听路由id变化，只要一变化就执行加载数据的逻辑即可。
// 2.key不适用缓存
// 3.onBeforeRouteUpdate：来自vue-router setup中用 路由更新前自动调用

// 👉使用key去解决路由缓存问题？
// 1. 如何使用：
// 找到路由出口，加一个key属性
/* <router-view :key="$route.fullPath"></router-view> */
// 2. 基础原理
//   router-view：在默认情况下，path不变的情况下会就地复用
//   router-view：加上key之后，fullPath变化，就会重新强制渲染(path对应的组件，会进行完全的销毁重建，所有的生命周期钩子函数都会重新执行一遍)
// 3.如何选择：
// 对于渲染性能要求高不高？  如果非常高，建议使用watch监听，不要破坏复用机制
// 对于渲染性能要求不高？  加上key强制刷新

// 👉key的作用？--面试
// 1.v-for循环渲染页面时，提高性能
// 2.解决路由缓存问题，强制重新请求

// 路由和组件？
// 1.新建一级/二级类目
// 2.把一级/二级类目组件和路由绑定(router/index.js写入路由)
// 3.给路由在一级/二级导航区添加跳转链接(headr-nav中用<RouterLink></RouterLink>替换)
// 4.点击跳转链接测试

// Day07
// provide和inject解决额外参数问题？
// 列表数据筛选？
// sub-sort和sub-filter提供查询数据；sub-list 使用查询数据进行数据接口调用(监听一下filterData变化 一旦发生变化之后 重新调用接口)
// 1. 在共同父组件中使用`provide`提供各个'查询数据'以及'操作数据的方法'
// 2. `sub-filter`组件和`sub-sort`组件1)通过`inject` 获取到操作数据的方法；2)组件中条件更改时通过调用方法把数据同步到共同父组件中
// 3. `sub-list`组件1)通过inject获取到查询数据；2)组件监听查询数据的变化，然后使用最新数据重新发起请求(需要拿到新的对象，用解构合并两个数组)
// attr属性字段修改时：需要去重(判断是否是同一个属性里的，把下标传进去，但不会再次发起请求)

// 上拉加载功能？
// 使用加载组件：必须两个变量；一个事件
// 1. 使用`useIntersectionObserver` 监听组件是否已经进入视口
// 2. 进入视口之后，抛出一个load事件，通知父组件可以开始加载下一页数据
// 3. 做额外判断，是否正在加载中，如果是就不触发load事件，是否已经全部加载完毕，如果是不触发事件

// 两个文件里，要响应式改变--满足两个条件？
// 1.定义的数据是响应式的
// 2.定义的这个数据是同一个

// Day08
// 控制大图和蒙层显隐？
// 通过判断`isOutside`的值来判断：
// 第1种：定义变量默认false；标签内加上v-if；取反isShow.value = !isOutside.value
// 第2种：直接标签内加上v-if取反

// Day09
// sku？
// 1.sku：指的是会影响商品价格和库存的属性。比如说手机  容量  颜色  产地
// 2.有效sku：所有的规格都选中，才能构成一条有效的sku数据，将来这个数据会生成一个skuId
// 3.组件当你选择的是有效的sku时，产出一条完整的sku对象信息；否则会产出空对象。

// vue3中父子通信的语法糖？
// 1.vue3 在组件身上写了v-model="name"：
//   1.给子组件传递了一个名称为`modelValue`的自定义属性 (即prop)
//   2.给子组件传递了一个名称为`update:modelValue`自定义事件
//   3.在触发自定义事件时，会自动把触发自定义事件(emit方法)时传递的实参，同步给v-model绑定的数据name身上
// 2.实现步骤：
//   1.子传父 emit('update:modelValue',实参number)
//   2.父传子 通过prop的监听使用把modelValue和Nmuber本身维护的number数据保持一致
// 另外一种思路：只维护一种状态 就是modelValue

// component动态组件？如果不用平时的方法使用组件时
/** 创建枚举
    const component = {
      detail: GoodsDetail,
      comment: GoodsComment
}
*/
// const componentName = shallowRef(component)
// return出去
// 使用：<component :is="字符串/组件引用"/>    <component :is="componentName[activeType]"></component>
// 字符串用来渲染 浏览器支持的默认标签
// 组件用来渲染vue组件

// Day10
// 商品详情图片渲染？
// 👉坑：
// 此处不能用懒加载，因为图片默认是没有高度的，加载后才有，并不是所有的图片渲染机制都一样(sort-list中有高度就可以)

// 热榜组件？
// 组件封装新思路: 根据业务状态封装组件
// 实现步骤:
//   热榜组件有三种业务类型 然后把业务类型设计为prop, 通过不同的业务类型传入, 渲染不一样的标题 和拉取不一样的数据
//   枚举加入(定义标题为对象(枚举)，用计算属性)

// 表单验证？
// 1.下载插件npm i vee-validate@4.0.3
// 2.导入两个组件
//   Form：最外层的表单组件
//   Field：具体的表单组件
//   import { Form, Field } from 'vee-validate'
// 3.准备校验函数对象schema(可单独放一个文件里，方便)
// 4.引入文件；使用`Form`组件配置校验规则和错误对象
//   <Form :validation-schema="curSchema" v-slot="{ errors }"/>
// 5.使用`Field`组件，添加表单项目校验
/*
    <Field
    v-model="form.account"
    name="account"
    type="text"
    placeholder="请输入用户名"
    :class="{error:errors.account}"
    />
*/
// 6.清理校验结果
//   先拿到Form表单组件的实例对象(表单身上绑ref)；再用resetForm
//   targetForm.value.resetForm()
// 7.兜底校验：
//   1. 通过ref获得表单组件对象
//   2. 执行组件对象身上的validate方法（执行完毕返回promise对象）

// Day11
// 消息组件封装？
// 1.通过类型归类所有的样式
// 2.提前准备样式，根据传下来不同的props进行样式匹配

// 校验成功做2件事？
// 跳转 + 消息提示成功

// 账户登录？
// 1）定义API  user.js
// 2）定义修改用户信息的mutation
// 3）实现登录逻辑: 1.触发已经准备好的action函数--store.dispatch

// 退出登录？
// 1. 清空用户数据 （本地和数据库）
// 2. 跳回到登录页 （记录当前发生退出登录行为时完整地址 fullPath path + 路径参数）