無法使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 帳號 昨天發布的推文：