前端培训丁鹿学堂：vue3的setup语法糖知识点总结（3/3）

路由跳转和路由参数在setup语法糖中的使用

在vue3中，组件的路由使用也做成了组合式api，通过vue引入的函数执行以后去使用。 这种确实没有以前那么好用，直接通过$router和$route就可以使用，但是从另外的角度去看，分离的更加彻底，也是一种优势。

<script setup>
  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: `/home`
  })
</script>

全局状态管理vuex在组件中使用（setup语法糖）

store也是用过userStore函数来创建的。 通过 import{useStore}from'vuex' const store=useStore(); 来创建一个store，就可以使用自己定义的全局状态属性和各种方法了。

<script setup>
  import { useStore } from 'vuex'
	const store = useStore();
    console.log(store._state.data.xxx);//调用state变量
    console.log(store._mutations.xxxFn());//调用mutations函数
</script>

setup中的async和await

我们学习async和await进行异步操作的时候，都知道他们要配合使用，否则会报错。 在setup语法糖里面，可以直接使用awiat而不需要再使用async，因为 setup 会自动变成 async setup 这个使用起来还是很方便的。

<script setup>
  import UserApi from '../api/UserApi'
  const data = await UserApi.getUserData()
  console.log(data)
</script>