无法使 Vuex 吸气剂等与 <script setup> Vue3 组合一起工作 API

Question

如果我像这样使用常规的 setup() 方法，我可以在 Vue 3 中使用组合 API 来实现它：

<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 不再被拾取并暴露给模板。

我不应该 return 来自 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：

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

编辑 2：

正如评论者所指出的，我的代码确实有效。然而，我被 Vetur 扩展所愚弄，将那些未returned 变量标记为未使用。所以在我看来，这就是它没有在模板中出现的原因。实际上，一个不相关的错误才是真正的原因。

由于这个 Vetur 问题，我现在将坚持使用旧的设置语法。

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> 中的用法实际上 works, but as pointed out in , the Vetur VS Code extension 显示了误导性错误。

从 0.34.1 开始，Vetur 不支持 <script setup>。 <script setup> 的推荐扩展名是来自 Vue 官方 Twitter 帐户的 Volar. This was even tweeted yesterday：

无法使 Vuex 吸气剂等与 <script setup> Vue3 组合一起工作 API

Unable to make Vuex getters etc. work with <script setup> Vue3 composition API

vue.js

vuex

vuejs3