如何在Vue中访问函数内的const？

Question

我正在使用 Laravel/Inertia/Vue3，我获取了用户对象，然后我想在其他函数中使用它，但它总是未定义。

\n

<script setup>\n// imports...\n\nconst props = defineProps({\n    // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n  alert(`${user.name} clicked`);\n}\n</script>\n

\n

如果我尝试访问userHTML v\xc3\xada 车把中的对象，它会按预期工作，但我无法在单击功能中使用它。当然，我可以const user在函数内部分配一个值usePage().props...，但这看起来很丑陋，必须有另一种方法。

\n

当然，我对 Vue 还很陌生。

\n

编辑 ＃＃＃＃＃

\n

当我说它看起来很丑时，我指的是这个：

\n

<script setup>\n// imports...\n\nconst props = defineProps({\n    // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n    const user = usePage().props.value.user;\n    alert(`${user.name} clicked`);\n}\n</script>\n

\n

一定有更好更正确的方法

\n

Answer 1

computed()返回 a ，因此您的点击处理程序需要通过\'sref解开该值refvalue：

\n

<script setup>\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n  //alert(`${user.name} clicked`); \xe2\x9d\x8c\n  alert(`${user.value.name} clicked`); \xe2\x9c\x85\n}\n</script>\n

\n

或者，您可以避免使用反应性变换进行展开<script setup>（即，$computed()在本例中）：

\n

<script setup>\n//const user = computed(() => usePage().props.value.user);\nconst user = $computed(() => usePage().props.value.user);\n\nconst click = () => {\n  alert(`${user.name} clicked`);\n}\n</script>\n

\n