如何使用VueX存储多个api数据并将属性添加到响应中

时间:2018-07-20 09:59:11

标签: vue.js axios

假设我想存储来自多个Api请求的数据-实例化该应用程序时, 我也想为每个响应添加属性

这是api'http://api.open-notify.org/iss-pass.json?lat=LAT&lon=LON'

的网址

已更新 我想用几个get请求中的所有数据实例化该应用程序-所以我正在循环所有请求-该部分工作正常,但我也希望能够从中添加到response.data.response对象属性城市数组,因此结局结果将为:

   cities: [{
      id: 0,
      cityName: 'Select a city',
      stuff from response.data...
    },......

这是Api通话的主要部分

       const store = new Vuex.Store({
        state: {
        satelliteData: [],
        dataObj:[],
        loading: true,
        cities: [{
          id: 0,
          cityName: 'Select a city',
          cityLocation: null
        },
        {
          id: 1,
          cityName: 'Tel Aviv',
          cityLat: '32.0853',
          cityLon: '34.7818'
        },
        {
          id: 2,
          cityName: 'London',
          cityLat: '51.5074',
          cityLon: '-0.1278'
        },
        {
          id: 3,
          cityName: 'New York',
          cityLat: '40.7128',
          cityLon: '-74.0060'
        },
      ],
      },


    actions: {
        loadData({commit}) {
          for(var i=0; i<this.state.cities.length; i++){
            var currData = this.state.cities[i];
            if(!!this.state.cities[i].hasOwnProperty('cityLat'))

            axios.get(URL, {
              params: {
                lat: this.state.cities[i].cityLat,
                lon: this.state.cities[i].cityLon,
              },
            }).then((response) => {

                  Here is where i want to be able to access the Cities array

           /*    var cities = this.$store.state.cities;
                console.log(cities) */
                commit('updateSatelliteData', response.data.response)
                commit('changeLoadingState', false)
              })
          }

        }
      }, 

Fiddle

由于我是Vue的新手,所以我确定这里有两个错误。谢谢

0 个答案:

没有答案