How to call another action in Vuex inside an action?

Question

Vue.js

I'm making a catalog of cultural heritage objects in Vue.
Just a page with object cards, like a clothing store.
I'm using VueX to get data via an API and store it.

First, I think you need to clarify first.
I have state heritageObjects: [] where the objects are stored.
I also have four actions for working with the API:
1. GET_HERITAGEOBJECTS_FROM_DB
2. APPEND_HERITAGEOBJECT_TO_DB
3. REMOVE_HERITAGEOBJECT_FROM_DB
4. EDIT_HERITAGEOBJECT_IN_DB
I think it's clear what they all mean.
So, is it normal practice that, for example, after adding a new record to the database, I again make a request to get all records from the database?

Well, that is, inside APPEND_HERITAGEOBJECT_TO_DB I do this:
1. I make a POST request to add a new record to the database
2. I get all records from the database again using GET_HERITAGEOBJECTS_FROM_DB
Similarly, after REMOVE_HERITAGEOBJECT_FROM_DB and EDIT_HERITAGEOBJECT_IN_DB, I am going to make a request every time to get all records from DB.

Well, if this practice is normal, then the question is : how to use another action inside an action?
How to call GET_HERITAGEOBJECTS_FROM_DB inside APPEND_HERITAGEOBJECT_TO_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
    }

Secondly, if the practice of pulling all records from the database every time is still abnormal, it’s correct to do something like this using the APPEND_HERITAGEOBJECT_TO_DB example:
1. I make a POST request to add a new record to the database
2. I change the state heritageObjects using mutation: []
Or how?

Answer 1

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

"For some reason"? And who promised you that this would work? Actions are called via dispatch, if they don't declare action as an arrow function, then dispatch will be available as a context property: Or (read the documentation more carefully) it is always available as a property of the action's first parameter.
this.dispatch('GET_HERITAGEOBJECTS_FROM_DB');

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

First, it's not vue, it's a linter. Secondly, it has nothing to do with your problem, it will swear at any code in this place. "Unreachable code" - unreachable code. This code will never be executed because it is located after return.