toRefs でのスクリプト設定と reactive state vue 3 の使用

Question

vue プロジェクトでスクリプト セットアップを使用しようとしています。

スクリプト設定を使用する前のスクリプトは次のようになります:

<script>
'../containers/Layout.vue' からレイアウトをインポートします。
import { reactive, toRefs } from 'vue'

デフォルトのエクスポート {
    名前: 「ホーム」、
    設定（） {
        const state = リアクティブ({});
        戻る {
            ...toRefs(状態)、
        };
    }、
    コンポーネント: { レイアウト、レイアウト }
}
</script>

これで、次のようになります:

<スクリプトのセットアップ>

'../containers/Layout.vue' からレイアウトをインポートします。
import { reactive, toRefs } from 'vue'

const state = リアクティブ({});
const props =defineProps({
    ヘッダー: 文字列
})


</script>

よくわからないのは、この場合に toRef をどのように使用するかということです。最初のケースでは変数を返すので、...toRefs(state) の使用方法は理解できました。 でもさて、どうやって使えばいいのでしょうか？それとももう必要ないのでしょうか？ ありがとうございます

Answer 1

スクリプト設定で state リアクションの値に直接アクセスしたい場合は、次のように オブジェクトの構造化 を使用できます:

リーリー

これで、テンプレート内の値に直接アクセスできるようになります

リーリー

ただし、すべての属性を再入力する必要があるため、不便です

Answer 2

スクリプト設定暗黙的な変換変数の定義

リーリー ＃＃＃に＃＃＃ リーリー スクリプト設定の

return {...dynamicValue} は置き換えることができず、一般的な使用例のみを対象としています。これには、script と組み合わせる必要があります。

return {...toRefs(state)}

生成された参照はスクリプト ブロックで使用されないため、メリットはありません。たとえそうであったとしても、通常は state オブジェクトではなく、個々のリアクティブ値として定義されます: リーリー これらの値を単一のオブジェクトとして処理する必要がある場合は、それらを結合できます。

リーリー

これは、

scripts

と script settings でも同様に機能します。