Javascript 在vuex中添加和重新获取阵列数据

Javascript 在vuex中添加和重新获取阵列数据,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,我有从api获取的这种格式的数据 在我的vuex状态下 state: { hoteldata:[] }, mutations: { FETCH_HOTEL_DATA: (state, payload) => { state.hoteldata = payload }, getHotels() { console.log(this.country); console.log(this.search_query); return a

我有从api获取的这种格式的数据

在我的vuex状态下

state: {
    hoteldata:[]
},
  mutations: {
    FETCH_HOTEL_DATA: (state, payload) => {        
      state.hoteldata = payload
    },
getHotels() {
console.log(this.country);
console.log(this.search_query);
  return axios.post('https://example.com.php',
    { country: this.country,
      search_query: this.search_query
    },
    { headers: {
    'Content-type': 'application/json',
    }
  }).then((response) => {
   
     //console.log('response: ' + response.data.images_results);
     
     Object.entries(response.data.images_results).forEach(([key, value]) => {
        this.$store.commit('FETCH_HOTEL_DATA', value);
        console.log(value);
        });
    console.log('state at this point...displays one row', this.$store.state.hoteldata);
  }).catch( error => { 
    console.log('error: ' + error); 
  });
}
这就是我用来将hotels数据设置为vuex状态的方法

state: {
    hoteldata:[]
},
  mutations: {
    FETCH_HOTEL_DATA: (state, payload) => {        
      state.hoteldata = payload
    },
getHotels() {
console.log(this.country);
console.log(this.search_query);
  return axios.post('https://example.com.php',
    { country: this.country,
      search_query: this.search_query
    },
    { headers: {
    'Content-type': 'application/json',
    }
  }).then((response) => {
   
     //console.log('response: ' + response.data.images_results);
     
     Object.entries(response.data.images_results).forEach(([key, value]) => {
        this.$store.commit('FETCH_HOTEL_DATA', value);
        console.log(value);
        });
    console.log('state at this point...displays one row', this.$store.state.hoteldata);
  }).catch( error => { 
    console.log('error: ' + error); 
  });
}
如何添加api中返回的所有数据行


第二,当我进行另一个api调用时,是将存储区中以前的数据替换为新数据还是vuex添加新数据而不考虑重复数据?

可以肯定的是,
getHotels()
是vuex操作,而不是getter,对吗?getHotels()是一种方法,我的代码中没有我认为应该有的MappedGetter。我以前从未这样做过,但是,从语法上来说,从组件调用突变并没有错,我认为这段代码不应该有任何问题(我只是一直只从存储操作调用突变)。你调用
images\u results
数组上的
Object.entries()
forEach()
,而不是直接将其提交存储,这有什么特别的原因吗?我正在做一个快捷方式,尽管我知道得更好。无论如何,没有什么可以阻止我这样做;添加从api接收的整个json。我已经这样做了,并使用getter来显示数据。您的理解没有错。我是那个解决复杂问题的人。我现在可以循环了,getter派上了用场。