Die Getter usw. von Vuex können nicht ordnungsgemäß mit der <script setup>-Kompositions-API von Vue3 funktionieren

Question

Ich kann es zum Laufen bringen, wenn ich die Kompositions-API in Vue 3 verwende und die reguläre setup()-Methode wie unten verwende:

<script>
  import { useStore } from 'vuex'
  import { computed } from 'vue'

  export default {
    const store = useStore()

    setup () {
      const loginStatus = computed(() => store.getters.loginStatus)

      return { loginStatus }
    }
  }
</script>

loginStatusJetzt in Vorlagen verfügbar und zur Verwendung in HTML bereit.

Aber wenn ich versuche, die neuere <script setup> Syntax zu verwenden, wird die Konstante nicht mehr erfasst und der Vorlage ausgesetzt.

Ich sollte vom Skript-Setup nichts zurückgeben, aber es geschieht auch nicht automatisch. Eslint markiert script setup中返回任何内容，但它也不会自动发生。Eslint将loginStatus als unbenutzt. Ich kann in diesem Zusammenhang keine Informationen zur Verwendung von Vuex finden:

<script setup>
  import { useStore } from 'vuex'
  import { computed } from 'vue'
  const store = useStore()

  const loginStatus = computed(() => store.getters.loginStatus)
</script>

Wird diese Erwartung nicht funktionieren? Oder kennen Sie eine empfehlenswerte Vorgehensweise?

Edit 1:

Mir ist diese Antwort bekannt, bei der die akzeptierte Lösung nicht die empfohlene Kompositions-API-Syntax ist. Die zweite Antwort besteht darin, von mir selbst erstellten Boilerplate-Code zu schreiben, der das, was ich tun möchte, möglich macht, aber nicht der offizielle Weg zu sein scheint (wenn es einen gibt ).

Edit 2:

Wie Kommentatoren betonten, funktioniert mein Code tatsächlich. Ich wurde jedoch von der Vetur-Erweiterung getäuscht, die Variablen als nicht zurückgegeben markierte. In der Vorlage sieht es für mich so aus, als ob es deshalb nicht erfasst wird. Tatsächlich ist ein nicht damit zusammenhängender Fehler die eigentliche Ursache.

Aufgrund dieses Vetur-Problems verwende ich vorerst noch die alte Setup-Syntax.

Answer 1

我一直在尝试

import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const con = computed(() => store.getters.connected);

在这种情况下，connected只是一个布尔值，但我也尝试过使用对象，它仍然有效。

我的模板：

<template>
  <h1>{{ con }}</h1>
</template>

它运行得很好。

Answer 2

你在 <script setup> 中的用法实际上是 有效的，但正如在 评论中指出的，Vetur VS Code 扩展 显示了误导性的错误。

从 0.34.1 版本开始，Vetur 不支持 <script setup>。推荐使用 <script setup> 的扩展是 Volar。这甚至是从 Vue 的官方 Twitter 账号 昨天发布的推文：