使用腳本設定和響應式狀態 vue 3 與 toRefs

Question

我正在嘗試在我的 vue 專案中使用腳本設定。

在使用腳本設定之前，我的腳本將是這樣的：

<script>
import Layout from '../containers/Layout.vue';
import { reactive, toRefs } from 'vue'

export default {
    name: 'Home',
    setup() {
        const state = reactive({});
        return {
            ...toRefs(state),
        };
    },
    components: { Layout, Layout }
}
</script>

現在我有這樣的：

<script setup>

import Layout from '../containers/Layout.vue';
import { reactive, toRefs } from 'vue'

const state = reactive({});
const props = defineProps({
    header: String
})


</script>

我不確定的是如何在這種情況下使用 toRefs？在第一種情況下，我們返回變量，因此我了解我們使用 ...toRefs(state) 的方式 但現在，我該如何使用它？或不再需要了？ 謝謝

Answer 1

如果您想要直接在腳本設定中存取 state 反應的值，您可以使用 物件解構如下所示：

import { reactive, toRefs } from "vue"

const state = reactive({ name: "admin", age: 20 })
const { name, age } = toRefs(state)

然後您可以直接在模板中存取您的值

<template>
    {{ name }}
</template>

但是，必須重新輸入所有屬性，這不太方便

Answer 2

腳本設定隱含翻譯變數定義

const a = ...

至

return {
   a: ...
}

腳本設定中的return {...dynamicValue}是不可取代的，它只適用於常見用例。這需要將其與腳本結合。

return {...toRefs(state)} 沒有好處，因為腳本區塊中不使用產生的參考。即使它們是，它們通常也被定義為單獨的反應值而不是 state 物件：

const a = ref(...)
const b = reactive(...)

return { a, b }; // Not needed in script setup

如果需要將這些值作為單一物件處理，可以將它們組合在一起：

const a = ref(...)
const b = reactive(...)
const state = reactive({ a, b });

return { a, b }; // Not needed in script setup

對於腳本和腳本設定來說，其運作方式是相同的。