Simple state management in Vue with provide/inject plus a Vue instance as event emitter

npm install

Then:

npm serve

To open a local dev server in the 8080 port. This project is built with vue-cli 3 so all the vue cli standard commands are available.

Sometimes, a vuex store to manage the state of a small application or a related group of components is some sort of an overkill (or so they say).

If you're not using a store, you will need to re-emit a lot of events and pass a lot of props down to long chains of components, which feels awkward and usually forces you to not split your application in components enough.

A way to handle this situation in React is the context api. Vue has a similar feature, provide/inject. Just providing a state object with provide solves the prop drilling problem, but provide/inject itself doesn't help to avoid the events re-emitting.

A way to avoid constant event re-emitting is to provide a Vue instance that serves as an event emitter (and, in fact, an EventEmitter instance will work the same). Instead of emitting and listening to events using $emit and $on on the components, we emit and listen events from and to a provided Vue instance.