Vue js не видит вложенные обьекты загруженных данных. В чем проблема?

Question

[Luke LikeSkywalker]

Работаю над приложением погоды учу Vue и Vuex. Запросил данные через axios и сохранил в state.data.

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import { api } from "./api_key";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: "",
    location: "New York"
  },
  mutations: {
    GET_DATA(state, response) {
      state.data = response.data;
    }
  },
  actions: {
    getData({ commit, state }) {
      console.log(api);
      axios
        .get(
          `https://api.openweathermap.org/data/2.5/forecast/daily?q=${
            state.location
          }&appid=${api}&units=metric&cnt=5`
        )
        .then(response => {
          if (response.data) {
            commit("GET_DATA", response.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  getters: {
    city(state) {
      return state.data.city.name;
    }
  }
});

Ошибка такая

Если отправить через геттер просто state.data.city проблем нет. Но когда нужно взять значение ключа state.data.city.name то city уже undefined. Решил проблему если сохранить в data не response.data, а сразу response.data.city. Но для меня это не выход так как помимо названия города мне еще нужны другие ключи.

Answer 1

[Roman K]

Сам себя решил перехитрить?

mutations: {
  GET_DATA(state, response) {
    state.data = response.data;
  }
},

if (response.data) {
  commit("GET_DATA", response.data);
}

Смекаешь?

P.S. Название мутации жжёт

Comments

[Pavel Shvedov]

Ну и в добавок, вызываешь геттер ещё до того момента, как запрос выполнился, а в стейте ещё нет никакого city, и он пытается запросить это поле у пустой строки, которая там лежит по умолчанию.

[Luke LikeSkywalker]

А что с названием то?
Pavel Shvedov, поподробнее пожалуйста

[Luke LikeSkywalker]

Pavel Shvedov, Но я же сделал так что бы целый обьект был сохранен по ключу data. А потом из этого data «вытянуть» то что хранится в state.data.city.name.

[Roman K]

oolooq,

А что с названием то?

А мутация что делает?) Ответь на этот вопрос и тебе станет ясно

[Luke LikeSkywalker]

Roman Kitaev, а все ясно. По комментарию выше как это я запрашиваю поле у пустой строки? Я просто только учу vuex

[Pavel Shvedov]

oolooq, запрос к серверу асинхронный и происходит не сразу, изначально в state.data лежит пустая строка, наверняка дергаете action в методе mounted(), а данные геттера выводите в шаблоне, шаблон рендерится раньше, следовательно геттер дергается до вызова экшна с запросом, данные еще не попали в стор, и геттер пытается получить это поле у того, что в сторе лежало до запроса данных, а там у вас строка, могу предложить два варианта:
1) по умолчанию в сторе храните предполагаемую структуру данных, но с пустыми значениями, для вашего случая я бы в state.data задал бы не пустую строку, а { city: { name: "", ... }, ... }, чтоб если геттер дернул это поле, оно существовало и без ошибок выводило пустое значение. И левому человеку будет понятней что хранится в сторе
2) или делать проверку в геттере на существование city в date

ну и по основному комментарию поправьте, вы в мутацию передаете response.data, хотя ждете там сам response, и получается в итоге в мутации обращение вида response.dat.data

[Luke LikeSkywalker]

Pavel Shvedov, делаю через хук created().
По первому варианту пытался так делать, тогда в state будет храниться много чего так как кроме city.name, там есть еще weather.condition, weather.stats, weather.temperature. Может этот способ т есть правильный. Попробую второй путь тоже.