Menggunakan tetapan skrip dan keadaan reaktif vue 3 dengan toRefs

Question

Saya cuba menggunakan persediaan skrip dalam projek vue saya.

Sebelum menggunakan tetapan skrip, skrip saya akan kelihatan seperti ini:

<script>
import Layout daripada '../containers/Layout.vue';
import { reaktif, toRefs } daripada 'vue'

eksport lalai {
    nama: 'Rumah',
    persediaan() {
        keadaan const = reaktif({});
        kembali {
            ...toRefs(negeri),
        };
    },
    komponen: { Susun atur, Susun atur }
}
</script>

Sekarang saya mempunyai ini:

<setup script>

import Layout daripada '../containers/Layout.vue';
import { reaktif, toRefs } daripada 'vue'

keadaan const = reaktif({});
const props = defineProps({
    tajuk: Rentetan
})


</script>

Apa yang saya tidak pasti ialah cara menggunakan toRefs dalam kes ini? Dalam kes pertama, kami mengembalikan pembolehubah, jadi saya faham cara kami menggunakan ...toRefs(state) Tetapi sekarang, bagaimana saya menggunakannya? Atau tidak diperlukan lagi? Terima kasih

Answer 1

Jika anda ingin mengakses nilai reaksi state terus dalam tetapan skrip, anda boleh menggunakan pemusnahan objek seperti ini:

import { reactive, toRefs } from "vue"

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

Anda kemudian boleh mengakses nilai anda terus dalam templat

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

Namun, semua atribut mesti dimasukkan semula, yang menyusahkan

Answer 2

脚本设置Terjemahan tersirat bagi definisi berubah

const a = ...

kepada

return {
   a: ...
}

kembali {...dynamicValue} dalam

脚本设置中的return {...dynamicValue}是不可替代的，它仅适用于常见用例。这需要将其与脚本 tidak boleh diganti, ia hanya sesuai untuk kes penggunaan biasa. Ini memerlukan menggabungkannya dengan skrip.

return {...toRefs(state)} 没有什么好处，因为脚本块中不使用生成的引用。即使它们是，它们通常也被定义为单独的反应值而不是 state Sasaran:

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

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

Jika anda perlu mengendalikan nilai ini sebagai satu objek, anda boleh menggabungkannya bersama-sama:

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

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

Ia berfungsi dengan cara yang sama untuk skrip dan 脚本和脚本设置.