如何从Vue对象动态提取数据用于后端POST请求？

Hey there! Great question—dealing with Vue's reactive objects (which wrap data with getters/setters) when you need a plain JS object for API calls is super common. Let's break down your options tailored to your workflow:

1. The Convenient Built-in Way: toRaw() #

Vue provides a dedicated utility to grab the raw, non-reactive version of a reactive object, which is perfect for your use case. It preserves all nested structures and skips the reactive wrapper entirely.

Here's how to use it with your setup:

// For Options API (your current data setup)
const plainOriginalRecord = Vue.toRaw(this.editingRecord.original);

// Send the plain object via axios
axios.post('/your-save-endpoint', plainOriginalRecord)
  .then(response => {
    // Handle success (e.g., reset form, show notification)
  })
  .catch(error => {
    // Handle error (e.g., show error message)
  });

toRaw() works seamlessly for both Vue 2 and Vue 3—it pulls the exact original object that Vue wrapped to make it reactive, so you get a clean, plain JS object without any reactive overhead.

Quick Caveat for Simple Cases #

If you don't have access to toRaw() for some reason, you can use JSON.parse(JSON.stringify()) as a quick workaround:

const plainOriginalRecord = JSON.parse(JSON.stringify(this.editingRecord.original));

Just note: This method fails if your object has circular references, functions, or special types like Date (which gets converted to a string). It's less robust than toRaw(), but works for basic data structures.

2. Manual Extraction (For Full Control) #

If you need a custom solution (e.g., for filtering specific keys or older Vue environments), you can build a recursive function to traverse the object and extract values, handling nested structures dynamically.

Here's a reusable function that works for any object shape:

function extractPlainObject(reactiveObj) {
  // Return non-object values directly
  if (typeof reactiveObj !== 'object' || reactiveObj === null) {
    return reactiveObj;
  }

  // Initialize plain object/array based on input type
  const plainObj = Array.isArray(reactiveObj) ? [] : {};

  // Iterate through all keys, skipping Vue's internal metadata
  for (const key in reactiveObj) {
    if (key.startsWith('__')) continue; // Skip Vue's internal keys like __ob__
    
    // Recursively process nested objects/arrays
    plainObj[key] = extractPlainObject(reactiveObj[key]);
  }

  return plainObj;
}

// Usage with your data
const plainOriginalRecord = extractPlainObject(this.editingRecord.original);

// Send via axios
axios.post('/your-save-endpoint', plainOriginalRecord);

This function handles dynamic key names, nested objects, and arrays—perfect for your scenario where data structures can change.

Integrating with Your Save Workflow #

Since you update editingRecord.original from copy on save, just slot the extraction right before your axios call:

saveRecord() {
  // Update original with copy data first
  this.editingRecord.original = { ...this.editingRecord.copy };

  // Extract plain object
  const plainData = Vue.toRaw(this.editingRecord.original);

  // Send to backend
  axios.post('/api/save-record', plainData)
    .then(() => {
      // Add your success logic here
      console.log('Record saved successfully!');
    });
}

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