vuex-动态模块没有唯一数据

Question

I have an async api call where I get an array of objects and then I map that to dynamically registered modules in my store. Something like this:

dispatch

// before this dispatch some api call happens and inside the promise
// iterate over the array of data and dispatch this action
dispatch(`list/${doctor.id}/availabilities/load`, doctor.availabilities);

The list/${doctor.id} is the dynamic module

action in availabilities module

load({ commit }, availabilities) {
  const payload = {
    id: availabilities.id,
    firstAvailable: availabilities.firstAvailable,
    timeslots: [],
  };
  // then a bunch of code that maps the availabilities to a specific format changing the value of payload.timeslots 
  commit('SET_AVAILABILITIES', payload)
}

mutation

[types.SET_TIMESLOTS](state, payload) {
  console.log(payload);
  state.firstAvailable = payload.firstAvailable;
  state.id = payload.id;
  state.timeslots = payload.timeslots;
}

When I check my logs for the console.log above each doctor has different arrays of time slots Exactly the data I want. However, in the vue developer tools and what is being rendered is just the last doctor's timeslots for all of the doctors. All of my business logic is happening in the load action and the payload in the mutation is the correct data post business logic. Anyone have any ideas why I'm seeing the last doctor's availabilities for every doctor?

Answer 1

It looks like you are assigning the same array (timeslots) to all doctors.

When you add an element to the array for one doctor, you mutate the array that all doctors are sharing.

However with the little code you show, it's difficult to know where is the exact problem.