Проблема Vuex, превращающая данные в наблюдателя - PullRequest
Новая
       66

Проблема Vuex, превращающая данные в наблюдателя

0 голосов
/ 16 февраля 2020

Я использую 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.

1 Ответ

0 голосов
/ 16 февраля 2020

Это не проблема, а предостережение между браузером и системой реактивности Vue. Чтобы узнать больше о реактивности Vue, проверьте их документы на Реактивность в глубине , там они объясняют, как это работает, и даже упоминают это предупреждение:

Одно предупреждение - это браузер Консоли форматируют getter / setters по-разному, когда преобразованные объекты данных регистрируются ...

И они рекомендуют использовать vue -devtools для более дружественного интерфейса самоанализа.

Однако существует способ просмотра зарегистрированных переменных с их данными без использования vue -devtools, способ состоит в том, чтобы регистрировать их, используя console.log(JSON.parse(JSON.stringify(data))), как показано ниже, чтобы убедиться, что он корректно использует консоль браузера, как StackOverflow. Консоль уже показывает без наблюдателя. 

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>
...