VUE3 电商项目浅浅总结一下

背景：

vue3.0 / 自己封装组件 / 电商购物网站

亮点：

1. 自己封装的一些基础组件（骨架屏、checkbox、下拉刷新、分页组件、消息提示、消息确认框）
2. SKU业务
3. 自己封装的message提示消息 全局函数式调用

学到了

1. 购物车操作通常分两种：本地和后端，操作用promise封装兼容同步和异步操作
2. 批量获取路径，注册组件require.context(文件夹路径,是否获取子目录,要匹配的文件正则regExp)
3. @change="handle()" --> @change=($event)=>handle($event,anyParams) 既拿到事件change传出来的$event又灵活传入自己想要的参数
4. 懒加载：可视区加载数据，可视区加载图片
5. actions(ctx) ctx属性模块中的还包含rootState，可以跨模块拿到其他命名空间下的vuex数据

例如：现在为cart模块，去拿user模块下的list
actions(ctx){
 ctx.rootState.user.list
}

getters:{
A(){
    return 'aaa'
}
B(state, getters){
   getters.A  //拿到同getters下其他函数 
} 

总结

批量获取路径，注册组件

// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
const importFn = require.context('./', false, /\.vue$/)
// 【importFn 2个功能：
//（1）importFn.key()获取所有符合条件的路径数组，
//（2）导入单个文件】
import XtxMessageFn from './Message'

export default {
  install (app) {
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxC