Composables 组合函数

下面案例有助于理解 vue 中的Composables 组合函数
我们在普通 js 文件（不是 vue 组件）中，定义如下函数。

// utils.js
import { useRouter } from "vue-router";

export const goto = (url) => {  
  const router = useRouter();  
  router.push(url);  
};

然后在 组件中调用它，会发现运行报错：Cannot read properties of undefined (reading 'push') .

// Example.vue
<script setup>
import {  goto } from "src/utils";
</script>

原因分析

useRouter 是Composables 组合函数。而 vue 对组合函数具有限制.也就是说，useRouter() 必须在 setup 中调用。这样vue才能够获取组件实例的上下文。

解决办法

利用闭包, 让下面这句话在setup中调用即可。

const router = useRouter();

实现手段

// utils.js
import { useRouter } from "vue-router";
export const goto = () => {  
  const router = useRouter();  
  const go = (url) => {  
    router.push(url);  
  };  
  return { go };  
};

// Example.vue
<script setup>
import {  goto } from "src/utils";
const { go } = goto();
</script>

这样在执行const { go } = goto() 的时候，useRouter()被调用。这正处于setup环境中，因此组合函数能够正确执行。