Vue.js+Pinia提交表单数据时如何避免发送完整Store状态

问题出在你直接将Pinia中的响应式引用（Ref对象）传入了JSON.stringify，序列化时会把整个Ref的内部结构（包括关联的完整Store状态）带进去，而不是实际的字段值。以下是几种修改方案：

方案一：直接访问Ref的value属性 #

构造请求体时，明确提取每个字段的实际值：

let postOptions = { 
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ 
    userName: userName.value, 
    userEmail: userEmail.value, 
    userText: userText.value 
  }) 
}

// 优化Promise写法（无需手动包装Promise）
fetch(`http://localhost:7050/receiveUserData`, postOptions)
  .then(res => res.text())
  .then(res => console.log('SERVER RESPONSE: ', res))
  .catch(err => console.error('ERROR: ', err))

方案二：从Store实例直接解构原始值 #

如果是在Store的action中发送请求，直接从state里获取非响应式的原始值：

// 假设在Store的action内
const state = this.state
const postOptions = { 
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ 
    userName: state.userName, 
    userEmail: state.userEmail, 
    userText: state.userText 
  }) 
}

fetch(`http://localhost:7050/receiveUserData`, postOptions)
  .then(res => res.text())
  .then(res => console.log('SERVER RESPONSE: ', res))
  .catch(err => console.error('ERROR: ', err))

方案三：避免在组件中误用storeToRefs #

如果是在组件中获取Store状态，若不需要响应式可以直接从Store实例解构原始值；若需要响应式，则通过value属性取值：

import { useYourStore } from '@/stores/yourStore'

const store = useYourStore()

// 情况1：不需要响应式，直接解构原始值
const { userName, userEmail, userText } = store

// 情况2：需要响应式，用storeToRefs后取value
const { userName, userEmail, userText } = storeToRefs(store)

// 构造请求体
const postOptions = { 
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ 
    userName: userName.value, 
    userEmail: userEmail.value, 
    userText: userText.value 
  }) 
}

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