Question

我有一个包含大约30个字段的Vuex商店，过去两天我一直试图弄清楚如何在将其传递到AJAX post方法之前正确收集它。我知道Vuex属性是反应性的，这可能会导致问题。我一直在运行测试，以便正确地填充我的Asp.Net控制器，这就是我找到的。

以下日志显示AJAX调用之前和之后。

我的硬编码对象工作正常，但这仅用于测试目的：

var obj = {
  'essay': 'hardcoded nonsense is nonsense',
  'age': 28
}

我的下一次尝试是直接传递store.state作为数据对象，但这也传递了大量不需要的材料，并且不适用于较大的对象。

然后我尝试将其转换为JSON，希望它能删除我不需要的所有垃圾（idea come from here）

var jsonData = JSON.parse(JSON.stringify(store.state))

一位朋友建议我使用_lodash来删除所有额外的内容，但是一旦它到达我的.Net控制器（idea came from here）就结果为空

var lodashData = _.omitBy(store.state, _.isNil)

即使所有结果都已成功注销，但只有前两个实际将任何数据传递给我的控制器。

做这样的事情的正确方法是什么？

var jsonData = JSON.parse(JSON.stringify(store.state))

var lodashData = _.omitBy(store.state, _.isNil)

export default {
  name: 'demo-submit',
  methods: {
    submit () {
      console.log('hardcoded object', obj)
      $.post('/Contest/UploadInfo', obj)
        .done(function (response, status, jqxhr) {
        console.log('success: hardcoded obj', obj)
      })
      .fail(function(jqxhr, status, error) {
          console.log('error: hardcoded')
      });

      console.log('store.state', store.state)
      $.post('/Contest/UploadInfo', store.state)
        .done(function (response, status, jqxhr) {
        console.log('success: store.state', store.state)
      })
      .fail(function(jqxhr, status, error) {
          console.log('error: store.state')
      });

      console.log('jsonData', jsonData)
      $.post('/Contest/UploadInfo', jsonData)
        .done(function (response, status, jqxhr) {
        console.log('success: jsonData', jsonData)
      })
      .fail(function(jqxhr, status, error) {
          console.log('error: jsonData')
      });

      console.log('lodashData', _.omitBy(store.state, _.isNil))
      $.post('/Contest/UploadInfo', lodashData)
        .done(function (response, status, jqxhr) {
        console.log('success: lodashData', lodashData)
      })
      .fail(function(jqxhr, status, error) {
          console.log('error: lodashData')
      });
    }
  }
}

Answer 1

JSON.parse和JSON.stringify应该有效。你的州的结构是否正确？请提供您的州代码。

如果它由于某种原因（不确定）不起作用，对于简单的情况，我认为你可以这样做：

const payload = {
  age: store.state.age,
  essay: store.state.essay
}

如果您有很多字段，请为其编写一个函数：

const toPlainObject = (state, keys) => {
  const obj = {}
  keys.forEach(key => {
    obj[key] = state[key]
  })
  return obj
}

const payload = toPlainObject(store.state, ['age', 'essay'])

如果您不想指定字段，只需使用for .. in来迭代整个州。

为AJAX调用准备Vuex Store数据的正确方法

1 个答案: