AJAX 호출을 위해 Vuex Store 데이터를 준비하는 적절한 방법

AJAX 호출을 위해 Vuex Store 데이터를 준비하는 적절한 방법

나는 약 30개의 필드가 들어 있는 Vuex 매장이 있는데, 지난 이틀 동안 나는 AJAX 포스트 메소드에 전달하기 전에 어떻게 적절하게 수집할 수 있는지 알아내려고 노력했다.나는 Vuex 속성이 반응적이고 이것이 문제를 일으킬 수 있다는 것을 이해한다.난 이 댕그렁이가 내 아스펜을 제대로 채울 수 있도록 테스트를 하고 있어.넷 컨트롤러와 내가 발견한 것은 이렇다.

아래 로그는 AJAX 통화 전후를 보여준다.

하드코딩된 내 물건은 잘 작동하지만, 이것은 단지 테스트용이었다.

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

나의 다음 시도는 바로 합격하는 것이었다.store.state데이터 객체로서, 그러나 이것은 또한 원하지 않는 많은 물질을 전달하고 더 큰 물체에서는 작동하지 않는다.

그런 다음 필요 없는 쓰레기를 모두 없애주길 바라며 JSON으로 전환하려고 했다(이상 여기서부터)

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

친구가 나에게 사용하자고 제안했다._lodash여분의 물건을 모두 없애려고 했는데, 내 몸에 닿으면 그냥 무효가 돼버렸어.Net 컨트롤러(아이디어는 여기에서 제공됨)

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

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전 주를 반복하다

참조URL: https://stackoverflow.com/questions/42602632/the-proper-way-to-prep-vuex-store-data-for-an-ajax-call