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