一文掌握 vue3.2 setup 语法糖

前言

提示：Vue3.2 版本开始才能使用语法糖！文掌握

在 Vue3.0 中变量必须 return 出来，法糖template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，文掌握无需 return，法糖template 便可直接使用，文掌握非常的法糖香啊！

提示：以下是源码库文掌握本篇文章正文内容，下面案例可供参考

一、法糖如何使用setup语法糖

只需在 script 标签上写上setup

代码如下（示例）：

</style>

十、文掌握路由useRoute和useRouter的法糖使用

代码如下（示例）：

import { useRoute, useRouter } from vue-router

// 声明

const route = useRoute()

const router = useRouter()

// 获取query

console.log(route.query)

// 获取params

console.log(route.params)

// 路由跳转

router.push({

path: `/index`

})

</script>

十一、store仓库的文掌握使用

代码如下（示例）：

import { useStore } from vuex

import { num } from ../store/index

const store = useStore(num)

// 获取Vuex的服务器托管state

console.log(store.state.number)

// 获取Vuex的getters

console.log(store.state.getNumber)

// 提交mutations

store.commit(fnName)

// 分发actions的方法

store.dispatch(fnName)

</script>

十二、await的法糖支持

setup 语法糖中可直接使用 await，不需要写 async ，文掌握 setup 会自动变成 async setup

代码如下（示例）：

import Api from ../api/Api

const data = await Api.getData()

console.log(data)

</script>

十三、亿华云法糖provide 和 inject 祖孙传值

父组件代码如下（示例）：

import { ref,文掌握provide } from vue

import AdoutExe from @/components/AdoutExeCom

let name = ref(Jerry)

// 使用provide

provide(provideState, {

name,

changeName: () => {

name.value = 小叮当

}

})

子组件代码如下（示例）：

import { inject } from vue

const provideState = inject(provideState)

provideState.changeName()

</script>