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

【问题标题】：The proper way to prep Vuex Store data for an AJAX call为 AJAX 调用准备 Vuex Store 数据的正确方法
【发布时间】：2017-07-24 23:10:31
【问题描述】：

我有一个 Vuex 商店，其中包含大约 30 个字段，在过去的两天里，我一直在尝试弄清楚如何在将其传递给 AJAX 发布方法之前正确收集它。我知道 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')
      });
    }
  }
}

【问题讨论】：

标签： javascript json ajax vue.js vuex

【解决方案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 迭代整个状态即可。

【讨论】：