Vue.js VUEX属性未定义问题

我有一只有趣的虫子。Chrome的控制台显示属性“name”未定义，但Vue工具显示getter工作正常。下面的图片

这是我的Vue工具。看看这些人。

这里还有我的store.js代码

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, data) {
    state.data = 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;
  }
}
});

组件的名称和代码

export default {
    methods:{
        selectCity(){
            if(this.city==""){
                return this.city="New York"
            }
        }
    },
    computed:{
        getLocation(){
            return this.$store.getters.city;
        }
    },
}

你的初始状态

state: {
  data: "",
  location: "New York"
}

将

数据设置为空字符串。这很可能是由于以下原因产生错误的原因：

state.data.city.name

其中，
city
在
字符串上未定义

在加载异步数据之前，将初始状态
数据设置为不会导致错误的状态

data: {
  city: {
    name: ''
  }
}


或者（并且因为上面的内容似乎打乱了您的其他逻辑），更改getter以原谅空数据

getters: {
  city (state) {
    return state.data.city && state.data.city.name || ''
  }
}

是的，在DevTools中你没有
city.name
只有
city:“纽约”
。你需要在
MySearchbar.vue
中显示你的代码。这是导致错误的原因。最后一块是MySearchbar.vueit仅用于JS/script。HTML（或“模板”）也是必需的。我试图将其设置为null。没用。还试图完全删除“位置”属性。相同的thing@UlukbekAbylbekov我想我第一次搞错了，在我的组件中更新了我的应答器初始数据？不，您的初始状态是Vuex@UlukbekAbylbekov那么现在的错误是什么？您的代码现在看起来像什么？