Vue スクリプト設定でのリアクティブ オブジェクトの構造化
Vue 3 ドキュメントに従って、<script setup> タグを使用してコンポーネント コードを簡素化する方法を確認しています。
この設定を使用する利点の 1 つは、オブジェクトを明示的に返すためにエクスポートのデフォルトのボイラープレートを使用する必要がなくなることです。トップレベルのスコープで宣言されたものはすべて、テンプレートで自動的に使用できるようになります。
私が抱えている問題は、私のアプリケーションには初期状態として非常に大きなオブジェクトがあるということです。通常の Vue 3 アプリケーションでは、オブジェクトを返し、次のように自動的に構造化できます。表示:
リーリーこれにより、オブジェクト内の各項目を独自の ref() として宣言する必要がなくなり、定型文が削除されます。
私の質問は、トップレベルの宣言のみを検出する Vue モードで同じ自動構造化をどのように実現できるかということです。 state.foo や state.bar を使用せずにオブジェクトのキーを直接参照できるようにしたいのですが、
で使用できるようにするために各キーを明示的に const として宣言する必要はありません。 ああああ