Vuex のゲッターなどを Vue3 の <script setup> 構成 API で適切に動作させることができません

Question

Vue 3 でコンポジション API を使用し、以下のように通常の setup() メソッドを使用すると、動作させることができます。 リーリー

loginStatus がテンプレートで利用可能になり、HTML で使用できるようになりました。

しかし、新しい

<script setup> 構文を使用しようとすると、const はキャプチャされず、テンプレートに公開されなくなります。

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

から何も返すべきではありませんが、これも自動的には行われません。 Eslint は loginStatus を未使用としてマークします。このコンテキストで Vuex を使用する方法に関する情報が見つかりません: リーリー これは

が機能しないという期待でしょうか?それとも推奨されるアプローチをご存知ですか?

編集1:

私は、受け入れられた解決策が推奨される合成 API 構文ではないというこの回答を知っています。2 番目の回答には、やりたいことを可能にする独自の作成の定型コードを書くことが含まれていますが、そうではないようです。公式の方法（あれば）。

編集2:

コメント投稿者が指摘したように、私のコードは実際に動作します。しかし、変数を返されないものとしてマークする Vetur 拡張機能に騙されました。したがって、テンプレートでは、それがキャプチャされていない理由であるように私には見えます。実際には、無関係なエラーが本当の原因です。

この Vetur の問題のため、私は当面まだ古いセットアップ構文を使用しています。

Answer 1

私は努力してきました

リーリー

この場合、connected は単なるブール値ですが、オブジェクトを使用してみましたが、それでも機能します。

私のテンプレート:

リーリー

正常に動作します。

Answer 2

<script setup> での使用法は実際には 有効です しかし、 コメントで が指摘したように、Vetur VS Code 拡張機能 誤解を招くエラーを示します。

バージョン 0.34.1 以降、Vetur は <スクリプト セットアップ> をサポートしません。 <script setup> の推奨拡張子は Volar です。これは Vue の公式 Twitter アカウント からも昨日: にツイートされました。