Vuex 问题将数据转换为观察者

Question

我正在使用 Vuex 来管理我的应用程序的状态。当我调度一个从服务器 API 调用一些数据的动作时，如果这个动作提交了一个突变，我的数据就会以某种方式转换为观察者对象而不是实际数据。这是 vuex 中的预期行为还是错误？

操作：

async getDataFromApi(context, payload) {
try {
    let data = callApi(foo);
    context.commit("SET_REPORTING_DATA", { data, id: payload })
    return data;
} catch (e) {
  console.log(e.code);
  console.log(e.message);
  return false;
}}

变异

SET_STATE(state, data) {
state.list = { ...state.list, [data.id]: data.data }
}

奇怪的是，当我记录从 API 获得的数据时，我得到了一个观察者对象，尽管我返回的是 api 的原始数据。

Answer 1

这不是问题，而是浏览器和 Vue 的反应系统之间的警告。要了解有关 Vue 反应性的更多信息，请查看他们在 Reactivity in Depth 上的文档，他们在那里解释了它是如何工作的，甚至提到了这个警告：

One caveat is that browser consoles format getter/setters differently when converted data objects are logged...

并且他们建议使用 vue-devtools 以获得更友好的内省界面。

然而，有一种方法可以在不使用 vue-devtools 的情况下查看记录的变量及其数据，方法是使用 console.log(JSON.parse(JSON.stringify(data))) 记录它们，如下所示，使用浏览器控制台验证它是否正确，正如 Whosebug 的控制台已经在没有观察者的情况下显示的那样。

var app = new Vue({
  el: '#app',
  data: () => ({
    obj: {
      a: 123
    }
  }),
  created() {
    console.log('Observer');
    console.log(this.obj);
    console.log('Data');
    console.log(JSON.parse(JSON.stringify(this.obj)));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Vuex 问题将数据转换为观察者

Vuex issue transforming data into observer

flux

vue.js

vuex