subscribeAction: before and after calls do not wait if we have a promise or await statement inside them.

[StijnVandermeulen1]

What problem does this feature solve?

If you subscribe to an action an return a promise or use an await statement, the code does not wait for the request to be complete. This is a problem when you implement a component as a plugin. Communication between components can be handled by the subscribeAction. But retrieving data and pushing it into the state using the afore mentioned methods will not result in any data since the service does not wait for it to be completed.

This feature would be very usefull for components as plugins that can be fully compartmentalized and plugged into different applications. Configuration retrieval can then be defined in the subscribeAction allowing different implementations over multiple applications.

What does the proposed API look like?

Example for before action:

Current code in src/store.js line 132:

try {

  this._actionSubscribers
    .filter(sub => sub.before)
    .forEach(sub => sub.before(action, this.state))
}

Should be:

try {

      async function asyncForEach(array, callback) {
         for (let index = 0; index < array.length; index  ) {
            await callback(array[index], index, array);
       }
     }

     await asyncForEach(this._actionSubscribers
       .filter(function (sub) { return sub.before; }), async function (sub) {
            return await sub.before(action, this$1.state); 
       });
    }

dispatch function should be async as wel.

[erikrenaud]

At the same time, would be nice if a plugin could create a "pseudo Action" for every mutation by providing some code that runs (async) before and after a mutation.

[Fifciu]

Currently, we need this proposal in our project. With that, we could load the required Vuex module only when the user uses action from it - which would give as huge performance benefits.