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

Question

[Сергей Калдыркаев]

Я делаю на 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: []
Или как?

Answer 1

[0xD34F]

// Вот так не работает почему-то:
// this.GET_HERITAGEOBJECTS_FROM_DB()

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

this.dispatch('GET_HERITAGEOBJECTS_FROM_DB');

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

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

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

Answer 2

[Михаил]

как внутри action использовать другой action

первым аргументов в action попадает объект, в котором есть метод dispatch, его и вызывайте
https://vuex.vuejs.org/api/#actions

Comments

[Сергей Калдыркаев]

Спасибо, разобрался.
Сделал так:

APPEND_HERITAGEOBJECT_TO_DB( {dispatch} ) {
      return axios('http://127.0.0.1:3000/test/', {
        method: "POST",
        data: {
          name: "",
          description: ""
        }
      })
      .then((heritageObject) => {
        dispatch('GET_HERITAGEOBJECTS_FROM_DB')
        return heritageObject;
      })
      .catch((error) => {
        console.log(error);
        return error;
      })
    }