Mocking Backend with IndexedDB and Dexie.js in Vue Projects

Introduction

Front‑end developers often receive urgent tasks before the back‑end services are ready, leaving them without data interfaces or persistence. By building a mock layer with IndexedDB and Dexie.js, developers gain deeper business insight, control over API definitions, and reduce integration time.

Why Not LocalStorage?

LocalStorage and SessionStorage lack structured data optimization, systematic management, and query support. WebSQL is deprecated, leaving IndexedDB as the viable option.

IndexedDB and Dexie.js

IndexedDB is a transactional, browser‑embedded NoSQL database that stores JSON‑like objects, similar to MongoDB or CouchDB. Dexie.js provides a friendly wrapper that simplifies CRUD operations.

Business Model

The mock app implements a simple message board: users create boards (posts) and messages (replies). Unauthenticated users can view boards but cannot reply, mirroring typical BBS behavior.

Defining the Database

Using Vue CLI, install Dexie and create db.ts with the following schema:

db.version(1).stores({
  users: `++id, name`,
  boards: `++id, topic, description, author`,
  messages: `++id, content, author, createdAt, parentId, parentType`
});

Mock API Definition

The minimal mock API includes:

createUser – create a user for login

getUsers – retrieve the user list

createDiscussion – create a board

getDiscussions – list boards

getDiscussionMessage – list messages under a board

createDiscussionMessage – add a reply

Key implementations:

api.prototype.getUsers = function() {
  return db.transaction("r", db.users, function() {
    return db.users.toArray();
  });
};

api.prototype.createUser = function(name) {
  return db.transaction("rw", db.users, function() {
    return db.users.add({ name: name });
  });
};

api.prototype.getDisucssionMessage = function(discussionId) {
  return db.transaction("r", db.messages, function() {
    return db.messages.where({
      parentId: discussionId,
      parentType: "discussion"
    }).toArray();
  });
};

The where method provides SQL‑like filtering on the messages table.

Vuex Store

Vuex actions wrap the mock API calls, allowing a seamless switch to real back‑end services later without changing business logic. Getters can expose login status to control posting permissions.

Putting It All Together

After implementing the mock API and Vuex store, the business logic can be built on top. Because the API layer is abstracted, swapping to a real back‑end only requires changing the injected service, keeping the rest of the code untouched.

Conclusion

IndexedDB empowers developers to continue front‑end work without a back‑end, and Dexie.js lowers the learning curve. Combining this with Vuex (or Angular services) decouples the UI from the API, reducing code smell, improving testability, and accelerating development while giving back‑end teams more time to design robust services.