serega1103
@serega1103
Студент, волонтёр Том Сойер Фест Пенза

Как во Vuex внутри action вызвать другой action?

Я делаю на Vue каталог объектов культурного наследия.
Просто страница с карточками объектов, как магазин одежды.
Я использую VueX для получения данных через API и их хранения.

Во-первых думаю надо сначала уточнить.
У меня есть состояние heritageObjects: [], где хранятся объекты.
Также у меня есть четыре actions для работы с API:
1. GET_HERITAGEOBJECTS_FROM_DB
2. APPEND_HERITAGEOBJECT_TO_DB
3. REMOVE_HERITAGEOBJECT_FROM_DB
4. EDIT_HERITAGEOBJECT_IN_DB
Думаю понятно что все они означают.
Так вот, нормальным ли является практика, что например после добавления новой записи в БД, я снова делаю запрос на получение всех записей из БД?

Ну то есть внутри APPEND_HERITAGEOBJECT_TO_DB я делаю так:
1. Делаю POST-запрос для добавления новой записи в БД
2. Снова получаю все записи из БД с помощью GET_HERITAGEOBJECTS_FROM_DB
Точно также после REMOVE_HERITAGEOBJECT_FROM_DB и EDIT_HERITAGEOBJECT_IN_DB я собираюсь каждый раз заново делать запрос на получение всех записей из БД.

Ну и если такая практика нормальная, то вот вопрос: как внутри action использовать другой action?
Как внутри APPEND_HERITAGEOBJECT_TO_DB вызвать GET_HERITAGEOBJECTS_FROM_DB?
GET_HERITAGEOBJECTS_FROM_DB({commit}) {
      return axios('http://127.0.0.1:3000/test/1', {
        method: "GET"
      })
      .then((heritageObjects) => {
        commit('SET_HERITAGEOBJECTS_TO_STATE', heritageObjects.data);
        return heritageObjects;
      })
      .catch((error) => {
        console.log(error);
        return error;
      })
    },
    APPEND_HERITAGEOBJECT_TO_DB() {
      return axios('http://127.0.0.1:3000/test/', {
        method: "POST",
        data: { name: "", description: "" }
      })
      .then((heritageObject) => {
        return heritageObject;
      })
      .catch((error) => {
        console.log(error);
        return error;
      })
      // Вот так не работает почему-то:
      // this.GET_HERITAGEOBJECTS_FROM_DB() 
      // Vue ругается: error   Unreachable code   no-unreachable
    }


Во-вторых, если практика каждый раз дёргать все записи из БД всё-таки ненормальная, правильно делать так что-ли на примере с APPEND_HERITAGEOBJECT_TO_DB:
1. Делаю POST-запрос для добавления новой записи в БД
2. С помощью мутацию меняю state heritageObjects: []
Или как?
  • Вопрос задан
  • 421 просмотр
Решения вопроса 2
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
как внутри action использовать другой action

первым аргументов в action попадает объект, в котором есть метод dispatch, его и вызывайте
https://vuex.vuejs.org/api/#actions
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
// Вот так не работает почему-то:
// this.GET_HERITAGEOBJECTS_FROM_DB()

"Почему-то"? А кто вам обещал, что так работать будет? Action'ы вызываются через dispatch, если не объявили action как стрелочную функцию, то dispatch будет доступен как свойство контекста:

this.dispatch('GET_HERITAGEOBJECTS_FROM_DB');

Или (читаем документацию внимательнее) он всегда доступен как свойство первого параметра action'а.

// Vue ругается: error   Unreachable code   no-unreachable

Во-первых - не vue, а линтер. Во-вторых, это не имеет никакого отношения к вашей проблеме, будет так ругаться на любой код в этом месте. "Unreachable code" - недостижимый код. Этот код никогда не выполнится, потому что он расположен после return.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы