Do we really need Vuex when building a web app using Firebase + Vue?

Question

We are building a to-go order web application for restaurants with Firebase and Vue.

• Restaurants can create their own pages, and add menu items.
• Users (customers) can orders some foods from those restaurants pages, and pick them up later.

At the beginning of the project, we have chosen to store some transient data (user data, shopping carts, etc.) in the Vuex store. It works fine but there are a lot of complexities in it, which made it hard to maintain.

Recently, I have realized that we could just use Firestore for those transient data as well, which will greatly simplify the architecture, eliminating Vuex completely.

Before making all the changes, I want to make it sure that I am on the right track and I am not missing anything.

I'd really appreciate any comments and suggestions from those people who have experience in building relatively large scale web applications using Firebase + Vue (or even React).

Answer 1

Short Answer

Yes, this seems perfectly reasonable.

Long Answer

Many web applications have their state synchronized via an external service like Firebase, GraphQL, etc. In these cases you may already be using some kind of shared, UI-independent cache (e.g. Frestore, Apollo client). Unless the aforementioned cache cannot be easily accessed by your UI components, there would be little benefit to switching or duplicating the data to Vuex.

Keep in mind that even in the above scenario, Vuex can still be a useful tool to track UI-specific state across otherwise disconnected components in your interface. For example, you could globally identify the user's current viewing mode, or which modal is open.