Question

我正在尝试使用具有深层嵌套关系数据的JSON API规范对API进行基本GET调用。我遇到了axios或vue操纵我的数据的问题......

关注提货和交付关系，原始数据如下所示：

{
  "data": {
    "type": "parent",
    "id": "34",
    "attributes": {
      // ...
    },
    "relationships": {
      "r1": {
        "data": [
          {
            "type": "nextparent",
            "id": "62",
            "attributes": {
              // ..
            },
            "relationships": {
              "pickup": {
                "data": [
                  {
                    "type": "package",
                    "id": 521,
                    "attributes": {
                      // ...
                    }
                  },
                  // ...
                ]
              },
              "delivery": {
                "data": []
              }
            }
          },
          // ...
        ]
      }
    }
  }
}

...其中提货有一组对象，而传递有一个空数组。但是，当我尝试在回调中检索响应时，投放是提货的精确副本。

var promise = window.axios({
  url: window.baseApi + '/my-object/34',
  method: 'get'
})

promise.then(function (response) {
  console.log(response)
})

每当你在回调中运行console.log(response)时，Vue的观察者就会应用于响应对象，这让我想知道这是否是一个Vue问题，只考虑第一个 r1的关系对象体验这一点。

回调日志的屏幕截图（不正确）：

此外，我检查了axios transformResponse 函数的响应，原始json是正确的（没有观察者）。这只发生在回调中。

来自transformResponse的日志截图（正确）：

我会尽快用小提琴更新。

修改

在vuex动作中调用axios函数。这是代码：

fetchData ({commit, dispatch}) {
  var promise = window.axios({
    url: window.baseApi + '/my-object/34',
    method: 'get'
  })

  promise
    .then(function (response) {
      console.log(response)
      commit('toggleProgress', {key: 'fetchingData'})
      commit('setActive', response.data.data)
      dispatch('otherModule/setActiveShipments', response.data.data, {root: true})
      dispatch('history/clear')
    })
    .catch(function () {
      //
    })

  return promise
},

Axios + Vue + Vuex使用深层嵌套数据操作基本GET

0 个答案: