Использование условного класса с геттерами магазина: не обновлять класс

Question

У меня есть div с условным классом, который хорошо работает при загрузке приложения, но не обновляется при изменении данных хранилища.

Код в моем компоненте vue выглядит следующим образом

<span class="week-day" 
    v-bind:class="{ complete: isDayComplete(day) }" 
    v-for="day in daysInWeek" 
    v-bind:data-day="day"
>&nbsp;</span>

И у меня есть ...mapGetters(['isDayComplete']) в моем computed объекте.

getter выглядит следующим образом

isDayComplete(state) {
  return (day) => {
    console.log(`called isDayComplete(${day})`)
    const formattedDay = moment(day, 'DD/MM/YYYY').format('YYYY-MM-DD');
    if (state.daysData[formattedDay]) {
      if (state.daysData[formattedDay].meals.length > 0) {
        console.log(`day ${day} is complete`);
        return true;
      } else {
        console.log(`day ${day} is NOT complete`);
        return false;
      }
    } else {
      console.log(`no data for day ${day}`);
      return false;
    }      
  }
},

Я обновляю данные о еде в mutation

updateMeals(state, meals) {
  _.forEach(meals, (meal) => {
    state.daysData[meal.day].meals.push(meal);
  });
}

И у меня есть action, который фиксирует эту мутацию

loadMeals({ state, commit }) {
  return new Promise((resolve, reject) => {
    get.meals.from.api()
      .then((response) => {
        commit('initDaysData');
        commit('updateMeals', response.data.data);
        return resolve();
      })
    .catch(reject);
  });
}

Так что всякий раз, когда я звоню loadMeals, класс не обновляется, если один день меняет свой статус (завершено/не завершено).Если я перезагружаю страницу, класс устанавливается правильно.

Что я делаю не так?Спасибо!

Answer 1

@ Иттус ответ был правильным.Я нашел другой способ добиться этого, который, возможно, мог бы помочь кому-то еще.

1) добавить еще mutation в магазин

updateCompletedDays(state) {
  const newState = [];
  _.forEach(state.daysData, (currentDayData, currentDay) => {
    if (currentDayData.meals.length > 0) {
      newState.push(currentDay);
    }
  });
  state.completedDays = newState;
},

2) зафиксировать эту мутацию после обновления еды

3) изменить isDayComplete getter на

isDayComplete(state) {
   const formattedDay = moment(day, 'DD/MM/YYYY').format('YYYY-MM-DD');
   return state.completedDays.indexOf(formattedDay) !== -1;
}

Обычно при использовании реактивности углубление в массивы / объекты не будет работать, лучше иметь массивы агрегированных данных (проверьте также Vue.set API)

Answer 2

Это общая проблема реактивности.Вы можете сделать глубокое копирование (используйте JSON.parse(JSON.stringify())), чтобы сделать данные реактивными:

updateMeals(state, meals) {
  _.forEach(meals, (meal) => {
    state.daysData[meal.day].meals.push(meal);
  });
  state.daysData = JSON.parse(JSON.stringify(state.daysData))
}