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

user_1412763 0
Viewed 358

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).

single-page-application google-cloud-firestore firebase vuex vue.js
2 Answers

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.

user_6359810

Yes you can go without VUEX, however, it will limit your potential.

First of all vuex is really simple, you can easly add vuex your code.

Without Vuex you may write same code again and again.

For example you want to redirect your user to his restaurant page when he logs in. So you write a code that first checks if user has a restaurant and then gets his restaurant ids.

Also you want to check when a user opens a restaurant page, if the user owns that page, you write the same code again. However, if you have a function that returns a value if user is the owner or not. You can call it any page you want.

user_136992530
Related