Is it okay to return non-reactive values from a composable?
E.g., like so:
// useNavLink.js
import { toValue } from 'vue'
import { useRouter } from 'vue-router'
export default function useNavLink(link) {
const router = useRouter()
const handleLinkClick = (ev) => {
ev.preventDefault()
router.push(toValue(link))
}
return { handleLinkClick }
}
// NavLink.vue
<template>
<a :href="link" @click="handleLinkClick">{{ label }}</a>
</template>
<script setup>
import useNavLink from '@/composables/useNavLink'
const { link, label } = defineProps(['link', 'label'])
const { handleLinkClick } = useNavLink(() => link)
</script>
The docs say the following,
The recommended convention is for composables to always return a plain, non-reactive object containing multiple refs.
but they don’t explicitly say that one shouldn’t return non-reactive values.
2