无法使用 <script setup> Vue3 组合 API 使 Vuex getter 等工作答案

【问题标题】：Unable to make Vuex getters etc. work with <script setup> Vue3 composition API无法使用 <script setup> Vue3 组合 API 使 Vuex getter 等工作
【发布时间】：2021-10-22 21:06:27
【问题描述】：

如果我像这样使用常规 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 并将其暴露给模板。

我不应该从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 扩展所愚弄，将那些未返回的变量标记为未使用。所以在我看来，这就是它没有在模板中被选中的原因。实际上，一个不相关的错误才是真正的原因。

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

【问题讨论】：

您的<script setup> 应该是work。如果它不适合您，请分享问题的重现。
你是对的，它确实有效。但是 Vetur 愚弄了我，它将未返回的变量显示为未使用，所以在我看来这就是它没有在模板中被选中的原因。但真正的原因是一个无关的错误。由于这个 Vetur 问题，我现在将坚持使用旧的设置语法。
尝试使用vuex扩展marketplace.visualstudio.com/…

标签： vue.js vuex vuejs3

【解决方案1】：

我一直在努力

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

const store = useStore();

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

在这种情况下，connected 只是一个布尔值，但我也尝试使用对象，它仍然有效。

我的模板：

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

而且效果很好。

【讨论】：

你说得对，我的代码确实有效。但是 Vetur 愚弄了我，它将那些未返回的变量显示为未使用，所以在我看来这就是它没有在模板中被选中的原因。但真正的原因是一个无关的错误。由于这个 Vetur 问题，我现在将坚持使用旧的设置语法。感谢您的调查！

【解决方案2】：

您在<script setup> 中的用法实际上是works，但正如comments 中指出的那样，Vetur VS Code extension 显示出误导性错误。

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

【讨论】：