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

Question

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

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

const click = () => {
  alert(`${user.name} clicked`);
}
</script>

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

当然，我对 Vue 还很陌生。

编辑#####

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

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

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

一定有更好更正确的方法

Answer 1

computed() returns a ref，因此您的点击处理程序需要通过 ref 的 value prop:

<script setup>
const user = computed(() => usePage().props.value.user);

const click = () => {
  //alert(`${user.name} clicked`); ❌
  alert(`${user.value.name} clicked`); ✅
}
</script>

或者，您可以避免使用 <script setup> 中的 Reactivity Transform 展开（即，在这种情况下为 $computed()）：

<script setup>
//const user = computed(() => usePage().props.value.user);
const user = $computed(() => usePage().props.value.user);

const click = () => {
  alert(`${user.name} clicked`);
}
</script>

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

How to access a const inside a function in Vue?

javascript

vue.js

vuejs3

vue-script-setup