In this blog we are going to see what Vue ORM is and how it works. When developing a scalable Vue or Nuxt application Vuex ORM is very helpful. ORM plugin enables Object-Relational Mapping access to the Vuex Store. It is an absorption of Vuex that allows you to conceive your application state in terms of models like CRUD operations, Orders etc. Making use of the objects the ORM tools transform data between incompatible system so ORMs are very popular for databases. This considerably simplifies your code. Instead of using this.$store.state.commit("UPDATE_USER", { ... }) you can use User.update({ ... }). It also reduces boilerplate code by setting up mutations and getter that you’ll need automatically. This makes it easy to work with nested data structures in the application state. Here is a simple to-do list example. Shown below is the store which will represent it.

store: {
  state: { todos: [] },
  mutations: {
    MARK_DONE(state, id) {
      const todo = state.todos.find(todo => todo.id === id);
      todo.done = true;
    }
  }
}

To display our to-do items on the application’s home page we’ll use computed property todos and v-for to link to-do  items to the template. To mark a to-do as “done” by clicking we make a commitment to MARK_DONE mutation. 

<template>
  <todo-item 
    v-for="todo in todos"
    :todo="todo"
    @click="markDone(todo.id)"
  />
</template>
<script>
  export default {
    computed: {
      todos() {
        return this.$store.state.todos;
      }
    },
    methods: {
      markDone(id) {
        this.$store.state.commit(MARK_DONE, id);
      }
    }
  }
</script>

Vuex ORM represents data as models so we will create a To-do model first and define fields like is, title, done.

store/models/post.js

import { Model } from "@vuex-orm/core";
export default class Todo extends Model {
  static entity = "todos";
  static fields () {
    return {
      id: this.string(""),      
      title: this.string(""),
      done: this.boolean(false),
      ...
    };
  }
}

Now we register the model to Vuex ORM which allows us to use the model. In store/index.js we register the Vuex ORM plugin with Vuex.

import VuexORM from "@vuex-orm/core";
import Todo from "./models/Todo";
const database = new VuexORM.Database();
database.register(Todo, {});
const plugin = VuexORM.install(database);
export default {
  plugins: [plugin]
};

 We can start using it in our components now. Import the model into a component file. To query our store we are using the CRUD method. The below lines of code belong to components/Home.vue.

import Todo from "../store/models/todo";
export default {
  computed: {
    // posts() {
    //   return this.$store.state.todos;
    // }
    todos: () => Todos.all();
  },
  methods: {
    markAsRead(id) {
      // this.$store.state.commit(MARK_DONE, id);
      Todo.update({
        where: id,
        data: { done: true }
      });
    }
  }
}

The Vuex ORM will automatically create state, mutations and getters that are aliased to the model API e.g. read, update, find.