How to check if an action (mutation) called from another component has completed?

Question

Vue.js

There is a SPA application with a chat (a system of dialogues linked to a specific article). In the main MainApp template, an action is called that initializes the initial chat data (the user's articles and whether there are unread messages for this article):

created() {
           this.$store.dispatch('chat/InitChatSystem');
        },

Initializing action:

InitChatSystem() {    
        axios.get('/api/initChat')
            .then(res => {
                this.commit('chat/initArticles', res.data.articles);                
                this.commit('chat/initNotifications', res.data.notifications);               
            })
            .catch(err => {
                console.log(err);                
            })
},

Action mutation:

initArticles(state, data) {   
        for (let i = 0, len = data.length; i < len; i++) {
            state.articles.push(data[i]);
        }    
},

On the chat page (keep-alive), a mutation is called:

activated() {            
            this.$store.commit('chat/openConversationArticle', this.article_id);            
        },

Mutation:

openConversationArticle(state, article_id) {
           ....
//Ищется статья, чтобы пометить все сообщения как прочитанные
            let notification_ids = [];            
            let article_index = state.articles.findIndex(x => +x.id === +article_id);
            console.log(article_index); //Всегда -1 (т.е. не найдено)
            state.articles[article_index].notification = false;
            state.articles[article_index].notification_count = 0;            
            if (notification_ids.length > 0) {
                axios.post('/api/markAsReadNotification', {notification_ids: notification_ids});
            }
        },

If you immediately open the chat page in the browser, an error appears:

Cannot set property 'notification' of undefined

in this line state.articles[article_index].notification =
false in the mutation openConversationArticle state.articles is not yet filled (checked, array length = 0).
How can I check whether other mutations have completed before calling a mutation?
Tried to do in InitChatSystem

return new Promise((resolve, reject) => {
...
}

And then like this:

openConversationArticle({ dispatch, commit }) {
    return dispatch('InitChatSystem').then(() => {
      commit('openConversationArticle')
    })
  }

However, in this case: first , the InitChatSystem action in the main template is called , then the dispatch('InitChatSystem') action in openConversationArticle is called again , and only then the article is mutated .

Answer 1

You don't need to check anything. What is the result of the completed action? - the availability of the necessary data. Make an appropriate getter, and hang it on a component instance v-ifwith this getter. While there is no data, the component instance will not be rendered, which means that the mutation requiring the missing data will also not be called, which means there will be no error.

Answer 2

From the component, kick an Action that makes a request to the Beck. Action - a promise, if successful, makes a mutation if not, returns false. And in the component, you get the result of Action . And handles then/catch