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

Question

我有一个Vuex存储，它包含大约30个字段，在过去的两天里，我一直在试图找出如何在将其传递到AJAX post方法之前正确地收集它。我知道Vuex属性是反应性的，这可能会导致问题。我一直在运行测试以使这个该死的东西正确地填充我的Asp.Net控制器，下面是我的发现。

下面的日志显示了AJAX调用前后的情况。

我的硬编码对象工作正常，但这只是出于测试目的：

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

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

然后我试着把它转换成JSON，希望它能删除所有我不需要的垃圾（想法来自这里）

var jsonData=JSON.parse（JSON.stringify（store.state））

一位朋友建议我使用\u lodash删除所有多余的内容，但一旦它击中我的.Net控制器，它就变成了空的（这个想法来自这里）

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'])

如果您不想指定字段，只需为..使用。。在中迭代整个状态。