Vue3의 <script setup> 구성 API에서 Vuex의 getter 등이 제대로 작동하도록 할 수 없습니다.

Question

Vue 3에서 구성 API를 사용하고 아래와 같이 일반 setup() 메서드를 사용하면 작동하게 할 수 있습니다.

으아악

loginStatus이제 템플릿으로 제공되며 HTML에서도 사용할 수 있습니다.

그러나 최신 <script setup> 구문을 사용하려고 하면 const가 더 이상 캡처되지 않고 템플릿에 노출됩니다.

스크립트 설정에서 아무것도 반환하면 안 되지만 자동으로 발생하지도 않습니다. Eslint는 script setup中返回任何内容，但它也不会自动发生。Eslint将loginStatus 사용하지 않은 것으로 표시합니다. 이 맥락에서 Vuex를 사용하는 방법에 대한 정보를 찾을 수 없습니다:

으아악

이런 기대는 안될 걸까요? 아니면 권장되는 접근 방식을 알고 계십니까?

편집 1:

허용된 솔루션이 권장되는 구성 API 구문이 아닌 이 답변을 알고 있습니다. 두 번째 답변은 제가 원하는 작업을 가능하게 만드는 자체 생성의 상용구 코드를 작성하는 것과 관련이 있지만 공식적인 방법은 아닌 것 같습니다. (있는 경우).

편집 2:

댓글 작성자가 지적했듯이 내 코드는 실제로 작동합니다. 그러나 나는 변수를 반환되지 않은 것으로 표시하는 Vetur 확장에 속았습니다. 따라서 템플릿에서는 캡처되지 않는 것처럼 보입니다. 실제로는 관련 없는 오류가 실제 원인입니다.

이 Vetur 문제 때문에 당분간은 이전 설정 구문을 계속 사용합니다.

Answer 1

노력했어요

으아악

이 경우 연결은 부울일 뿐이지만 개체를 ​​사용해 보았지만 여전히 작동합니다.

내 템플릿:

으아악

잘 작동합니다.

Answer 2

<script setup>의 사용법은 실제로 유효지만 댓글에서 지적했듯이 Vetur VS Code 확장 프로그램 은 오해의 소지가 있는 오류를 표시합니다.

버전 0.34.1부터 Vetur는 <script setup>。推荐使用 <script setup>를 지원하지 않습니다. 에 권장되는 확장자는 Volar입니다. 이것은 심지어 Vue의 공식 트위터 계정 어제

에서도 트윗되었습니다: 🎜