Question

我们所有的服务器API资源都以JSON对象的形式返回，如下所示：

{
  data: {
    ... Business data from the controller
  }
  meta: {
    ... meta data added by middleware
  }
}

这个想法是将元数据添加到json响应中，该响应可用于更新vuex存储数据。工作得很好，即使我们正在逐步将其替换为pushe以更容易地保持我们的客户端状态为最新，我们仍然从服务器返回包装的数据对象。

基本上，我们有一个axios拦截器来处理响应的元部分，然后抛出原始数据以供任何vuejs组件处理。

这就是理论。这是它的工作原理。

引导Axios

Axios按如下方式引导到应用程序中：

window.axios = require('axios');
Vue.prototype.$http = axios;

注意我们过去用axios替换了Vue资源。无论如何。这基本上是在任何其他代码之前完成的。

下一部分是添加拦截器：

引导拦截器

axios.interceptors.response.use(
  (response) => {
    window.app.$emit('update-meta-data', response.data.meta);
    response.data = response.data.data;
    return response;
  },
  (error) => {
    ... error handling goes here
  }
);

常规组件

在任何常规组件中，我们都可以执行以下操作：

this.$http.get();

结果是 - 对于我的组件 - 拦截器正确地剥离了元位。工作出色。

...但是使用mixin

我还有一个我在组件中包含的mixin;然而，在这些情况下，拦截器不起作用。

这是mixin代码：

module.exports = {
  mounted: function() {
    this.$http.get('/resource').then(
      (response) => {
        ... here I expect to be able to do response.data
        ... but the response.data contains the original json object
        ... including both data and meta properties
      }
    )
  }
}

mixin包含在组件中如下：

<script>
  module.exports = {
    mixins:[require('../mixins/repository.js')],
    ...
  }
</script>

将mounted方法从mixin移动到实际组件时，它按预期工作。我不明白为什么。

我认为这是因为这个。$ http可能是没有拦截器的另一个对象，但事实并非如此，因为当我在拦截器中添加console.log() devug打印件时，我看到来自我的调用在混合中，它确实经历了它的逻辑。唯一的区别似乎是response.data似乎没有设置为原始响应的response.data.data。

我希望这一切都有道理。

感谢您的协助！

Answer 1

好。我真的很困惑，但终于找到了我的问题。从服务器返回的数据不是我预期的，但是嵌套在那里的另一个数据对象中。 VueJS / Axios代码完成了我的预期;我从没想过这个服务器资源错误地将它包装两次。

感谢那些花时间阅读这个问题的人。祝你有愉快的一天！

在VueJS组件mixin

1 个答案: