Modeling Data In Quasar Like A BOOOSS With VuexOrm

It's hard to express the impact VuexOrm has had on my career as a developer.

It's fundamentally changed the way I deal with data on the frontend! At Agripath (where I work), we almost NEVER deal with the store directly.

Most interactions with the store are done with VuexOrm, which gives us a gorgeous API. Stuff like this:

import User from 'models/User'
import Post from 'models/Post'

User.all()

const posts = await indexPosts()
Post.insert({ data: posts })

Post.query()
  .orderBy('rating')
  .with('comments.user')
  .get()

If that code doesn't excite you, either read it again or check your pulse!

Take a look at VuexORM video series to find out more, and learn VuexOrm!

VuexORM App Extension (AE)

Truth be told, it doesn't take too much work to setup VuexOrm with Quasar. However, there are a few things we can do to streamline the setup. Here's some of the features:

1. Auto import and register models to the "VuexOrm database"!
2. Easily create new models using Quasar's cli
3. models alias already registered for you

Once everything is setup, all you have to do to add a new model is run the following command:

quasar run vuex-orm new:model Todo

Now you're ready to insert, find, delete, update etc Todo's to your hearts content!

Give It A Try

Ready to take VuexORM for a spin? Take a look at the VuexOrm App Extension GitHub page and let me know how it goes!

And remember,

You can build anything...

Comments

[Martin]

Hi Luke, I started to check options to manage the Data, and I found OrbitJS (orbitjs.com) maybe you want to check it out...
Cheers!