Vue 3 ドキュメントに従って、<script setup> タグを使用してコンポーネント コードを簡素化する方法を確認しています。
この設定を使用する利点の 1 つは、オブジェクトを明示的に返すためにエクスポートのデフォルトのボイラープレートを使用する必要がなくなることです。トップレベルのスコープで宣言されたものはすべて、テンプレートで自動的に使用できるようになります。
私が抱えている問題は、私のアプリケーションには初期状態として非常に大きなオブジェクトがあるということです。通常の Vue 3 アプリケーションでは、オブジェクトを返し、次のように自動的に構造化できます。表示:
リーリーこれにより、オブジェクト内の各項目を独自の ref() として宣言する必要がなくなり、定型文が削除されます。
私の質問は、トップレベルの宣言のみを検出する Vue モードで同じ自動構造化をどのように実現できるかということです。 state.foo や state.bar を使用せずにオブジェクトのキーを直接参照できるようにしたいのですが、
で使用できるようにするために各キーを明示的に const として宣言する必要はありません。 ああああ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
現在と同じようにオブジェクトを構造解除し、スプレッド演算子を使用して残りのオブジェクトのキーと値を保存できます。
リーリーfoo と bar を除くすべてのキーには、残りの変数にアクセスすることでアクセスできます。
のようにrest.testこれがあなたが望んでいることではない場合、あなたがやろうとしていることは不可能だと思います。
私の答えがあなたが望むものではない場合は、この記事を参照してください。 ES6 で動的に名前が付けられた変数に構造を分解するにはどうすればよいですか?