在毕设中，使用vue3+pinia的一些收获

vue3

1. 在 script 标签上的属性 setup 为componentAPI的语法糖

   • 在此中import，定义的变量和函数等，在模板中都可以访问
   • 可自动解包（ref变量在模板中不需要.value）
   • vant组件在setup中不需要注册，只需在此中import即可

2. 修改ui框架样式，::v-deep 已过时

  :deep(.van-nav-bar__title) {
    color: white;
  }
1
2
3

    <template #slotName>template>   
    <slot name="slotName">slot>   
1
2

4. 使用ref获取dom

<script setup>
  const form = ref(null);

  const submit = () => {
    form.value.submit();
  };
script>

<template>
<form ref="form">form>
template>
1
2
3
4
5
6
7
8
9
10
11

5. vue3定义props的类型

defineProps({
  comments: {
    type: Array as () => Array<CommentModel>,
    required: true,
  },
});

1
2
3
4
5
6
7

6. vant单元格title插槽，文字超出不换行的解决方式为css：word-break: break-all;

7. vant Uploader组件向后端(multer)传单个图片：

const formData = new FormData();
formData.append("file", file.file);

const res = await service.post("org/upload", formData);
1
2
3
4

8. 创建和更新共用一个路由时，可以根据传的id判断，如id大于0即为更新，小于0即为创建

9. vue引入本地图片工具类

export class AssetsHelper {
  public static imgUrl(path: string): string {
    const url = new URL(`/src/assets/images/${path}`, import.meta.url);
    return url.href;
  }
}
1
2
3
4
5
6

10. axios 相应拦截器在处理错误时，如果返回Promise.reject(error)，会阻止发出该请求的函数继续向下执行。如果需要在400情况下做出处理，可以使用try，catch

11. v-for与v-if优先级问题，永远不能将二者一起使用

    在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常
    引用自：https://juejin.cn/post/7097067108663558151

12. // 全局自定义指令写法
    
    /*
    *	目录为 src/directives，在此定义index，用于统一导入；自定义的指令都在这里定义，如role
    */
    
    // index.ts 写法
    import role from "@/directives/role";
    
    export default (app)=>{
        role(app)
    }
    
    // role.ts 写法
    export default (app)=>{
        app.directive('role',{
            mounted(el,role){
                if(role.value === 1){
    
                }else{
                    el.style['display'] = 'none'
                }
            }
        })
    }
    
    // main.js 写法
    import registerDirectives from './directives'
    
    const app = createApp(App);
    registerDirectives(app)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

13. v-for支持结构写法，也支持循环范围

     
    
       {{ name }}
     
     
      
    Item #{{ n }}
      
    1
    2
    3
    4
    5
    6
    7
    8

14. 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

15. 在22年6月份左右，完美支持移动端vue3布局的富文本插件不多，横向对比了几款后，我放弃了使用vue-quill-editor，选择了 tinymce-vue

16. vant List 组件，如果首次加载的列表没有占满屏幕，则会重复加载，直到finished=true或占满屏幕

17. vant Dialog有两种弹出方式，函数式和组件式

18. moment.js调整为中文

// App.vue
import moment from "moment";
import "moment/locale/zh-cn";

onMounted(() => {
 moment.locale("zh-cn");
});
1
2
3
4
5
6
7

19. vue-cropper 负责图片裁剪，很好用的插件。

pinia

1. 定义好的store不能使用结构语法，会使其失去响应式

• 如果只访问store中的状态，而不进行操作，则可以用storeToRefs()进行结构

const store = useStore()
const { name, doubleCount } = storeToRefs(store)
1
2

2. store.$reset() 可以将store.state重置为默认值
3. store的命名为useXxxStore