toRefs でのスクリプト設定と reactive state vue 3 の使用
P粉387108772
2023-08-26 15:38:41
<p>vue プロジェクトでスクリプト セットアップを使用しようとしています。 </p>
<p>スクリプト設定を使用する前のスクリプトは次のようになります: </p>
<pre class="brush:php;toolbar:false;"><script>
'../containers/Layout.vue' からレイアウトをインポートします。
import { reactive, toRefs } from 'vue'
デフォルトのエクスポート {
名前: 「ホーム」、
設定（） {
const state = リアクティブ({});
戻る {
...toRefs(状態)、
};
}、
コンポーネント: { レイアウト、レイアウト }
}
</script></pre>
<p>これで、次のようになります:</p>
<pre class="brush:php;toolbar:false;"><スクリプトのセットアップ>
'../containers/Layout.vue' からレイアウトをインポートします。
import { reactive, toRefs } from 'vue'
const state = リアクティブ({});
const props =defineProps({
ヘッダー: 文字列
})
</script></pre>
<p>よくわからないのは、この場合に toRef をどのように使用するかということです。最初のケースでは変数を返すので、<code>...toRefs(state)</code> の使用方法は理解できました。
でもさて、どうやって使えばいいのでしょうか？それとももう必要ないのでしょうか？
ありがとうございます</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
スクリプト設定で
リーリーstateリアクションの値に直接アクセスしたい場合は、次のように オブジェクトの構造化 を使用できます:これで、テンプレート内の値に直接アクセスできるようになります
リーリーただし、すべての属性を再入力する必要があるため、不便です
リーリー ＃＃＃に＃＃＃ リーリー スクリプト設定のスクリプト設定暗黙的な変換変数の定義return {...dynamicValue}
return {...toRefs(state)}scriptと組み合わせる必要があります。生成された参照はスクリプト ブロックで使用されないため、メリットはありません。たとえそうであったとしても、通常は
リーリーstateオブジェクトではなく、個々のリアクティブ値として定義されます:リーリーこれらの値を単一のオブジェクトとして処理する必要がある場合は、それらを結合できます。これは、
scriptsと
script settingsでも同様に機能します。