vue 中 const { x } = this 的用法

最近学习了一个取值的新写法, 大大方便了取值操作

1 import store from '@/store'
2 const { tenant, logo } = store.state.user;

以上写法相当于

1 import store from '@/store'    
2 const tenant = store.state.user.tenant
3 const logo = store.state.user.logo

也可以取值函数中返回的值

1 import { useScrollTop } from '@/composition/scroll'  
2 const {
3       scrollPositionNumber,
4       onScrollToPosition,
5       showScrollTopBtn,
6       onScrollEvent,
7 } = useScrollTop()

以上写法相当于

1 import { useScrollTop } from '@/composition/scroll'
2 const scrollPositionNumber = useScrollTop().scrollPositionNumber
3 const onScrollToPosition = useScrollTop().onScrollToPosition
4 const showScrollTopBtn = useScrollTop().showScrollTopBtn
5 const onScrollEvent = useScrollTop().onScrollEvent

结合Vue3.0语法使用起来,简直6的飞起

目前感觉比较适用:

  1. 获取store / localStorage / sessionStorage 存的对象中的属性
  2. 获取复杂函数中的多个返回值

分享一刻:

原文地址:https://www.cnblogs.com/huangaiya/p/14200499.html