Vue3 <script setup>语法下Vuex getters无法正常使用问题咨询

核心结论 #

<script setup>和Vuex不存在兼容性问题，你的写法本身完全符合官方规范，问题完全出自Vetur插件的适配缺陷。

问题根本原因 #

• Vetur是针对Vue2开发的老旧编辑器插件，已停止对Vue3新语法的维护更新，无法正确识别<script setup>中顶层变量自动暴露给模板的特性，因此会误报变量未使用，这不是代码本身的问题。
• 你后续排查出的“实际运行正常”完全符合预期，<script setup>语法本身就会自动暴露所有顶层声明的变量、导入的内容给模板，不需要手动return。

官方推荐修复方案 #

• 卸载Vetur，安装Vue - Official（原Volar）插件，这是Vue官方维护的编辑器支持工具，完美适配<script setup>所有特性，不会出现上述误报，也能提供更完整的Vue3代码提示、类型检查能力。
• 如果因特殊原因必须保留Vetur，可在ESLint配置中添加<script setup>块的未使用变量豁免规则，或给对应变量添加// eslint-disable-next-line no-unused-vars注释临时屏蔽报错，但该方案治标不治本，不建议长期使用。

相关写法规范说明 #

你写的<script setup>中调用Vuex的用法就是官方推荐的标准写法，这里顺便修正你之前普通setup()写法中的语法错误：你之前把const store = useStore()写在了export default内部、setup函数外部，不符合语法要求，useStore必须在setup函数作用域内调用，正确的普通setup()写法如下：

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

export default {
  setup () {
    const store = useStore()
    const loginStatus = computed(() => store.getters.loginStatus)
    return { loginStatus }
  }
}
</script>

标准<script setup>写法和你提供的代码完全一致，没有问题：

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

内容的提问来源于stack exchange，提问作者anatolhiman