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

Posted

技术标签:

【中文标题】为 AJAX 调用准备 Vuex Store 数据的正确方法【英文标题】:The proper way to prep Vuex Store data for an AJAX call 【发布时间】: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')
      );
    
  

【问题讨论】:

【参考方案1】:

JSON.parseJSON.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 数据的正确方法的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Store Vuex 中加载 DOM 之前调用 api?

vueX (sore) 的使用步骤

Vuex的引入及其仓库store的配置

vueX版本求和案例

vuex

vuex的使用