Что является запросами в компонентах во Vuex

Question

Что является запросами в компонентах во Vuex

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

В Vuex запросы к данным хранилища выполняются через геттеры (getters). Это вычисляемые свойства хранилища, которые позволяют получать и обрабатывать данные без их изменения.

Геттеры:

Кэшируются, как computed-свойства
Принимают state и другие геттеры как аргументы
Могут возвращать динамические данные через функцию

Пример:

const store = new Vuex.Store({
  state: { todos: [{ id: 1, text: 'Learn Vuex', done: true }] },
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done),
    getTodoById: state => id => state.todos.find(todo => todo.id === id)
  }
});

// В компоненте:
computed: {
  doneTodos() { return this.$store.getters.doneTodos; },
  todo() { return this.$store.getters.getTodoById(1); }
}

Для сложных запросов можно использовать mapGetters из vuex.

Ответ 18+ 🔞

А, ну это про Vuex, да? Блядь, опять эти геттеры, как будто без них жизнь не мила! Слушай, представляешь, у тебя там в хранилище куча всякого барахла валяется — state, называется. А чтобы не рыться в нём руками, как в помойке, есть такие штуки — геттеры (getters). Это как твой занудный друг, который всегда знает, где что лежит, и ещё при этом может посчитать, сколько тебе сдачи с тысячи надо.

Ну, короче, они:

Кэшируются, как computed-свойства — то есть, пока данные не поменялись, не будут пересчитываться просто так, от нехуй делать. Умно, блядь.
Могут смотреть на state и даже на других геттеров — подглядывать, суки.
Могут возвращать не только статичную хуйню, но и функции, если надо что-то динамическое выцепить.

Смотри, пример, чтобы не быть просто пиздаболом:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Выучить Vuex', done: true },
      { id: 2, text: 'Не сойти с ума', done: false }
    ]
  },
  getters: {
    // Вот этот геттер — как сито. Отфильтрует только сделанные дела.
    doneTodos: state => state.todos.filter(todo => todo.done),
    // А этот — хитрая жопа. Возвращает функцию, чтобы можно было спросить по ID.
    getTodoById: state => id => state.todos.find(todo => todo.id === id)
  }
});

// А в компоненте потом делаешь так:
computed: {
  doneTodos() { return this.$store.getters.doneTodos; }, // Все выполненные
  todo() { return this.$store.getters.getTodoById(1); } // Конкретная одна
}

И если у тебя этих геттеров, как говна за баней, можно использовать mapGetters из vuex, чтобы не писать эту нудятину вручную. Ёпта, удобно же!