Reduce the usage of the global state

[christianlupus]

Currently, the global state of the Vuex is used for quite some tasks. This includes e.g. storing the current recipe (including all details, not just the stub) for the RecipeView and RecipeEdit components.

In #1073, I saw this pattern. I am asking myself if this is a good pattern as it seems to make things quite complex. When the recipe was a prop of the RecipeView one would not have to be too careful about the storage access. At the moment we have multiple information that needs to stay in sync (id of the route, recipe information, image). At least on my machine, I am having a minor optical regression when opening a recipe if another recipe was opened before (the old image is shown for a short amount of time).

For the edit case, it is the same that the id needs to be kept in sync (see #1073) to select the correct API endpoint. That would simplify data management.

For me, I do not see any real benefit in using a global state here. I guess it was moved there as a general rule to move everything there or due to a lack of better ideas. In general, a global state is an anti-pattern in many cases, and reading the code of Vue is not very trivial as you do not see all the side effects (as we are misusing the root component as an event bus).

I am opening this discussion to see your opinions on the topic. Am I missing something vital?
Mainly I am pinging @seyfeb and @MarcelRobitaille as these are the most recent contributors to the Vue components.