在Vue中使用Pinia的mapState出现意外字符错误求助

你的错误出在Vue Options API中computed选项的写法上：

1. 语法错误原因：

   • 在Options API里，computed是组件选项的一个对象属性，而非函数。你写成了computed()，这是Composition API的写法，但内部直接使用...mapState不符合语法规则——扩展运算符只能在对象/数组字面量中使用，单独放在函数里会抛出语法错误。

2. 修正方案（Options API）：
   把computed()改成对象形式，用扩展运算符展开mapState返回的计算属性：

<template>
  <HblLogin v-if="!loggedIn" />
</template>

<script>
import { userStore } from '@/stores/userStore';
import HblLogin from '@/components/hbl/HblLogin.vue';
import { mapState } from 'pinia';

export default {
  name: 'HblHome',
  components: { HblLogin },
  // 正确写法：computed是对象，扩展mapState的结果
  computed: {
    ...mapState(userStore, ['loggedIn'])
  }
};
</script>

<style scoped></style>

3. 推荐方案（Pinia官方推荐的Composition API）：
   如果你使用Vue 3，更推荐用Composition API结合storeToRefs来保持状态响应式，写法更简洁：

<template>
  <HblLogin v-if="!loggedIn" />
</template>

<script setup>
import { userStore } from '@/stores/userStore';
import HblLogin from '@/components/hbl/HblLogin.vue';
import { storeToRefs } from 'pinia';

const store = userStore();
// 使用storeToRefs解构，确保loggedIn保持响应式
const { loggedIn } = storeToRefs(store);
</script>

<style scoped></style>

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