DEV Community

Abraham Brookes
Abraham Brookes

Posted on

What's the point of a data store?

I'm roughly two years into developing with vue/vuex, having used it across five personal projects and two large scale apps that I have built at work (one mostly solo deving). Initially I found a lot of conventions confusing and struggled to understand why we had to do a lot of things the vue way, when it seemed like we could skip out on some things in order to simplify the development process.

I have come to grips with most of the reasons these days, but one thing still frustrates me. What's the point of a data store, really?

I'm talking in particular about the persisted crud classes - "Models" in Laravel - in an orm-like, normalized store structure such as vuex-orm.

I'll use the example of an ecommerce application. You have an admin area that creates, edits and deletes Product models. When creating a new Product, you send some data to the database and then store the response in your data store - in vuex that's likely your Products store module. Then when you go to the edit page for that Product later, you already have the data locally. Nifty.

However, when you're navigating around the admin area and go to a Product that you didn't just create, you need to load that data for the product page. At this point as a developer I see two choices - a: fetch the product when the user navigates into the product edit page or b: fetch all of the products you expect to need and fill your datastore at page load.

The problem with b is that it's extremely hard to know what you're going to need to load, so you're very likely going to just load everything, resulting in a massive initial query and a longer ttfb, especially as your application (and database) grows. You also risk holding stale data in your store if something elsewhere (like a purchase going through) modifies your object data.

The problem with a is that you're fetching the data when you load up the component anyway, so why bother storing it locally?

To further frustrate this, your average store algorithm (redux, vuex) doesn't like you directly editing store state, so when you load up your edit component you almost always have to copy the model out of the store using the unfortunately hacky-looking JSON.parse(JSON.stringify(object)).

Am I missing something here? What is the point of a data store?

Top comments (0)