The proper way to prep Vuex Store data for an AJAX call

Question

I have a Vuex store that contains about 30 fields and for the past two days I've been trying to figure out how to properly collect it before passing it into an AJAX post method. I understand that Vuex properties are reactive and this can cause problems. I've been running tests to get this dang thing to properly populate my Asp.Net controller and here's what I've found.

The logs below show before and after the AJAX call.

My hardcoded object works just fine, but this was just for testing purposes:

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

My next attempt was to directly pass store.state as the data object, but this also passes a lot of unwanted material and doesn't work on larger objects.

Then I tried to convert it to JSON in hopes that it would remove all the crap I didn't need (idea come from here)

var jsonData = JSON.parse(JSON.stringify(store.state))

A friend suggested I use _lodash to remove all the extra stuff, but it just ended up being null once it hit my .Net controller (idea came from here)

var lodashData = _.omitBy(store.state, _.isNil)

Even though all the results have success logged out, only the first two actually passed any data to my controller.

What's the proper way to go about doing something like this?

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')
      });
    }
  }
}

score 3 · Answer 1 · answered Mar 05 '17 at 06:51

JSON.parse and JSON.stringify should work. Does your state be structured correctly? Please provide your state code.

If it doesn't work for some reason (not sure), for simple cases I think you can just do this:

const payload = {
  age: store.state.age,
  essay: store.state.essay
}

If you have a lot of fields, write a function for it:

const toPlainObject = (state, keys) => {
  const obj = {}
  keys.forEach(key => {
    obj[key] = state[key]
  })
  return obj
}

const payload = toPlainObject(store.state, ['age', 'essay'])

If you don't want to specify fields, just use for .. in to iterate the entire state.

The proper way to prep Vuex Store data for an AJAX call

1 Answers1