无法使Vuex的getter等与Vue3的<script setup>组合API一起正常运行

Question

如果我在Vue 3中使用组合API并且像下面这样使用常规的setup()方法，我可以让它工作：

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

  export default {
    const store = useStore()

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

      return { loginStatus }
    }
  }
</script>

loginStatus现在在模板中可用并且可以在html中使用。

但是当我尝试使用较新的<script setup>语法时，const不再被捕捉并暴露给模板。

我不应该从script setup中返回任何内容，但它也不会自动发生。Eslint将loginStatus标记为未使用。我找不到有关如何在此上下文中使用Vuex的任何信息：

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

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

这个预期是不会工作的吗？或者你知道推荐的做法吗？

编辑1：

我知道这个答案，其中接受的解决方案不是推荐的组合API语法，第二个答案涉及编写自己创建的样板代码，使我想做的事情成为可能，但似乎不是官方的方式（如果有的话）。

编辑2：

正如评论者指出的那样，我的代码实际上是有效的。但是，我被Vetur扩展标记为未返回的变量所欺骗。所以在模板中它对我来说看起来像是它没有被捕捉到的原因。实际上，与此无关的错误才是真正的原因。

因为这个Vetur问题，我暂时还是使用旧的setup语法。

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 账号 昨天发布的推文：