Vue组件返回Pinia Store遇保留前缀错误及表单提交异常求助

第一个问题：setup返回Pinia Store触发的保留前缀警告 #

错误信息 #

[Vue warn]: setup() return property "$subscribe" should not start with "$" or "_" which are reserved prefixes for Vue internals.
at <Login backend="http://localhost:1337" onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

问题根源 #

直接返回整个Pinia Store实例，会把Store内部带$前缀的内部方法（比如$subscribe）暴露给组件模板，而Vue将$和_开头的属性列为内部保留前缀，因此触发警告。

修复方案 #

不要返回整个Store，按需导出模板需要的属性和方法：

setup() { 
  const userStore = useUserStore()
  // 仅返回模板用到的内容
  return {
    credentials: userStore.credentials,
    login: userStore.login,
    register: userStore.register
  }
}

第二个问题：表单提交时的原生事件处理器未捕获错误 #

错误信息 #

[Vue warn]: Unhandled error during execution of native event handler
at <Login backend="http://localhost:1337" onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at
at

问题分析 #

• 表单同时绑定@submit="login"和提交按钮的@click="login"，导致login方法被重复触发
• login方法内部抛出错误但未被捕获，触发Vue的未处理错误警告
• 硬编码凭证可正常运行，说明问题出在表单事件逻辑或数据传递环节

修复步骤 #

1. 移除重复事件绑定：表单的submit事件已能触发登录，删除按钮上的@click="login"：

<form @submit="login" class="login-form">
  <!-- 其他表单元素 -->
  <input type="submit" value="Log in" class="button loginButton"/>
  <input type="button" value="Register" class="button registerButton" @click="register" />
</form>

2. 阻止表单默认行为并捕获错误：在login方法中添加事件拦截和错误捕获：

async function login(e) {
  e.preventDefault() // 阻止页面刷新的默认提交行为
  try {
    // 执行登录逻辑
    await userStore.login(credentials)
  } catch (err) {
    // 捕获错误并处理，比如打印日志或提示用户
    console.error('登录失败:', err)
  }
}

3. 移除冗余的input事件绑定：v-model已自动实现数据双向绑定，不需要额外的@input="updateCredentials"，直接简化输入框代码：

<input type="text" required class="input" v-model="credentials.username" />
<input type="password" required class="input" v-model="credentials.password" />

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