小兔鲜vue3+ts|项目实战遇到的难点问题（1）

1.eslint自定义规则

eslintrc.cjs文件中把组件名必须使用组合字设置为关闭。

2.axios的二次封装（ts类型提示）

利用泛型和数据接口最后把请求的结果返回，此时返回是有类型提示的。

1.利用axios的二次封装发送请求

和正常一样使用，只是前面加上指定的泛型类型即可。

3.ts类型声明规划

统一出口
在types下的index.ts中统一出口

1.导入是注意加上type

4.实现导航吸顶效果@vueuse/core

实现效果：当浏览器窗口滚动距离上方大于78的时候，显示导航吸顶组件。
导航吸顶组件设置定位为fixed。

1.使用使用原生监听scrollTop

2.使用@vueuse/core包的useWindowScroll()方法

vueuse/core: 组合式API` 常用复用逻辑的集合

5.监听组件进入可视区域。（请求懒加载）

使用@vueuse/core 的useIntersectionObserver
基于此函数封装一个hook逻辑函数。

isIntersecting是一个bool值，判断是否进入可视区域。
第一个参数apiFn()是发起请求的函数。
第二个参数是是否进行继续监听。
如果想要实现，下拉继续加载，直到数据没有才停止监听的话，那可以设置flag，到flag为false，就只监听一次。
返回值为target，即要监听的ref节点。

1.注意：vue3中设置ref是如何设置的？

在模板节点上直接把ref设置为对应的变量，即可获取节点的dom。

6.使用现有的组件库

1.插件注册全局组件。

导入要使用的组件。
引入vue中的APP和Plugin，
以插件的形式注册全局组件

2.插件注册全局组件可能导致没有类型提示。

这段代码是为了在 TypeScript 中给组件库的组件添加类型声明，以便在使用这些组件时能够获得自动补全和类型检查等功能。具体来说，这段代码定义了一些全局组件，并通过 interface GlobalComponents 来声明它们的类型，其中使用了 typeof 来获取组件的 TS 类型。最后通过 declare module ‘vue’ 来将这些类型声明文件导出，以便其他模块可以引用。

7.解决路由缓存问题

8.修复路由滚动问题

刷新时，或者跳转其他页面组件时，希望回到顶部。则在createRouter中配置如下：

9.商品规格化组件sku

大致步骤：

1. 根据后台返回的 skus 数据得到有效 sku 组合
2. 根据有效的 sku 组合得到所有的子集集合
3. 根据子集集合组合成一个路径字典，也就是对象。
4. 在组件初始化的时候去判断每个规格是否点击
5. 在点击规格的时候去判断其他规格是否可点击
6. 判断的依据是，拿着说有规格和现在已经选中的规则取搭配，得到可走路径。
   1. 如果可走路径在字典中，可点击
   2. 如果可走路径不在字典中，禁用
      

10.登录后页面回跳。

跳转登录时，把路径存在query中，等登录结束后，再把query里的参数拿到router.push或replace中实现跳转。

11.登录成功后有token，请求头携带token

12.实现第三方登录

有三种状态，一种是已经注册过且绑定。，直接跳转回首页。
第二种：注册过，但未绑定openId（qq的唯一标识），唯一标识。
第三种：未注册，进行信息完善，发送请求，回到首页。

参考文档：
[QQ互联JS_SDK(opens new window)](https://wiki.connect.qq.com/js_sdk使用说明#3…E8.87.AA.E5.在这里插入图片描述
AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE)
准备工作(opens new window)

参考05登录模块md文件。

测试使用：

在index.html导入sdk.js

13.切换绑定和注册切换交互

利用keepalive内置组件，保存了组件缓存。
使用来实现切换组件

14.@vueuse/core的useIntervalfn实现倒计时hook

参考文档：https://vueuse.org/shared/useintervalfn/
基于useIntervalFn()二次封装成hook函数

15.购物车状态

分为两种情况：未登录时，使用本地存储进行数据增栅改查。
登录时，发起请求直接修改。

当登录之后，需要合并两者购物车。

同理，修改、删除购物车都需要判断是否登录。

合并购物车状态。

16.层级问题

position: fixed 固定定位，指定元素相对于屏幕视口（viewport）的位置来指定元素位置。

拓展阅读：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

🐛踩坑：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

使用teleport传送门内置组件，来处理这个问题。

直接把弹框传送到body中。

17.支付宝支付

给支付宝按钮添加链接。
支付成功后，路由回携带支付的query参数。再请求订单数据渲染到支付结果页面上。