05_views.md

В'юхи

Після використання нашого застосунку, ми замічаємо, що в нас накопичилось багато продуктів, які ми додали в список покупок, проте є декілька найважливіших, які буває складно знайти в списку і перевірити чи вони точно є. Для вирішення цієї проблеми добавимо ще одне поле — isFavorite:

const TodoModel = types.model({
  id: types.string,
  //...решту полів
  isFavorite: types.optional(types.boolean, false),
})
.actions((self) => ({
  // ...решту екшенів
  toggleFavorite() {
    self.isFavorite = !self.isFavorite;
  },
}));

А для того, щоб нам було зручно відображати лиш список вибраних, добавимо в'юшку до нашої моделі списку. Вона дозволить нам не тільки спростити взаємодію, а й кешувати результати, що особливо зручно, коли у вас відбуваються важкі калькуляції:

const TodoListModel = types.model({
  list: types.array(TodoModel),
})
.views((self) => ({
  get favoriteList() {
    return self.list.filter(item => item.isFavorite);
  },
}))
.actions((self) => ({ /* тут екшн додавання задачі */ }));

Варто пам'ятати: в'юхи оголошуються як getери, тоді вони будуть кешуватись, ті які оголошені як функція — не будуть. Крім того вони не будуть частиною снепшоту.