Impossible de faire fonctionner correctement les getters, etc. de Vuex avec l'API de composition <script setup> de Vue3

Question

Je peux le faire fonctionner si j'utilise l'API de composition dans Vue 3 et la méthode setup() habituelle comme ci-dessous :

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

  export default {
    const store = useStore()

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

      return { loginStatus }
    }
  }
</script>

loginStatusMaintenant disponible en modèles et prêt à être utilisé en HTML.

Mais lorsque j'essaie d'utiliser la nouvelle syntaxe <script setup>, le const n'est plus capturé et exposé au modèle.

Je ne devrais rien renvoyer de la configuration du script, mais cela ne se produit pas automatiquement non plus. Eslint marque script setup中返回任何内容，但它也不会自动发生。Eslint将loginStatus comme inutilisé. Je ne trouve aucune information sur la façon d'utiliser Vuex dans ce contexte :

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

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

Est-ce que cette attente ne va pas fonctionner ? Ou connaissez-vous une approche recommandée ?

Edit 1 :

Je connais cette réponse où la solution acceptée n'est pas la syntaxe API de composition recommandée, la deuxième réponse implique d'écrire du code passe-partout de ma propre création qui rend possible ce que je veux faire, mais ne semble pas être la manière officielle (Si il y en a un ).

Edit 2 :

Comme les commentateurs l'ont souligné, mon code fonctionne réellement. Cependant, j'ai été trompé par l'extension Vetur marquant les variables comme non renvoyées. Donc, dans le modèle, il me semble que c'est pour cela qu'il n'est pas capturé. En fait, une erreur sans rapport est la véritable cause.

En raison de ce problème Vetur, j'utilise toujours l'ancienne syntaxe de configuration pour le moment.

Answer 1

J'ai essayé

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

const store = useStore();

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

Dans ce cas, Connected n'est qu'un booléen, mais j'ai aussi essayé d'utiliser un objet et cela fonctionne toujours.

Mon modèle :

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

Ça fonctionne très bien.

Answer 2

Votre utilisation dans <script setup> est en fait valide, mais comme indiqué dans les commentaires, l'extension Vetur VS Code affiche des erreurs trompeuses.

À partir de la version 0.34.1, Vetur ne prend pas en charge <script setup>。推荐使用 <script setup>. L'extension recommandée pour est Volar. Cela a même été tweeté depuis le compte Twitter officiel de Vue hier

 : 🎜