Dealing with a Vuex store that holds around 30 fields has been quite the challenge for me over the past couple of days. I've been struggling to properly gather the data before sending it through an AJAX post method. Being aware of the reactivity of Vuex properties, I've encountered some issues along the way. After conducting various tests to make sure the data is correctly passed to my Asp.Net controller, here's what I discovered.
Below are logs showing the state before and after the AJAX call.
Initially, I tried using a hardcoded object, which surprisingly worked fine for testing purposes:
var obj = {
'essay': 'hardcoded nonsense is nonsense',
'age': 28
}
My subsequent attempt involved directly passing store.state as the data object, but this resulted in passing unnecessary data and didn't work well with larger objects.
Then, I attempted to convert it to JSON hoping to get rid of unwanted data (idea sourced from here)
var jsonData = JSON.parse(JSON.stringify(store.state))A friend recommended using _lodash to filter out extra content, but unfortunately, it ended up being null upon reaching my .Net controller (source idea from here)
var lodashData = _.omitBy(store.state, _.isNil)Despite all the logs indicating success, only the first two methods actually transmitted any data to my controller.
What would be the correct approach for handling this kind of situation?
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')
});
}
}
}