Utilisation des paramètres de script et de la vue d'état réactif 3 avec toRefs

Question

J'essaie d'utiliser une configuration de script dans mon projet vue.

Avant d'utiliser les paramètres du script, mon script ressemblerait à ceci :

<script>
importer la mise en page depuis '../containers/Layout.vue' ;
importer { réactif, toRefs } depuis 'vue'

exporter par défaut {
    nom : 'Maison',
    installation() {
        état const = réactif ({});
        retour {
            ...toRefs(état),
        } ;
    },
    composants : {Mise en page, Mise en page}
}
</script>

Maintenant, j'ai ceci :

<configuration du script>

importer la mise en page depuis '../containers/Layout.vue' ;
importer { réactif, toRefs } depuis 'vue'

état const = réactif ({});
const props = définirProps({
    en-tête : chaîne
})


</script>

Ce dont je ne suis pas sûr, c'est comment utiliser toRefs dans ce cas ? Dans le premier cas, nous renvoyons une variable, donc je comprends la façon dont nous utilisons ...toRefs(state) Mais maintenant, comment l'utiliser ? Ou plus nécessaire ? Merci

Answer 1

Si vous souhaitez accéder à la valeur d'une state réaction directement dans les paramètres du script, vous pouvez utiliser la déstructuration d'objet comme ceci :

import { reactive, toRefs } from "vue"

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

Vous pourrez ensuite accéder à vos valeurs directement dans le template

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

Cependant, tous les attributs doivent être ressaisis, ce qui n'est pas pratique

Answer 2

脚本设置Traduction implicite des définitions de variables

const a = ...

à

return {
   a: ...
}

return {...dynamicValue} dans

脚本设置中的return {...dynamicValue}是不可替代的，它仅适用于常见用例。这需要将其与脚本 n'est pas remplaçable, il ne convient qu'aux cas d'utilisation courants. Cela nécessite de le combiner avec un script.

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

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

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

Si vous devez gérer ces valeurs comme un seul objet, vous pouvez les combiner :

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

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

Cela fonctionne de la même manière pour les scripts et 脚本和脚本设置.