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.

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

const store = useStore();

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

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