Vuex ORM Plugin: LocalForage

VuexORMLocalforage is a plugin for the amazing VuexORM that let you sync your Vuex Store with an IndexedDB database using LocalForage.

Installation

Add the package to your dependencies

yarn add vuex-orm-localforage

Or

npm install --save vuex-orm-localforage

Then you can setup the plugin

import VuexORM from '@vuex-orm/core'
import VuexORMLocalForage from 'vuex-orm-localforage'

const database = new VuexORM.Database()

VuexORM.use(VuexORMLocalForage, {
  database
})

// ...

export default () => new Vuex.Store({
  namespaced: true,
  plugins: [VuexORM.install(database)]
})

See https://vuex-orm.github.io/vuex-orm/guide/prologue/getting-started.html#create-modules on how to setup the database

Actions

This plugin add some vuex actions to load and persist data in an IndexedDB

| Action | Description | | ------- | ----------- | | $fetch | Load data from the IndexedDB store associated to a model and persist them in the Vuex Store | | $get | Load data by id from the IndexedDB store associated and persist it to Vuex Store | | $create | Like VuexORM insertOrUpdate, but also persist data to IndexedDB | | $update | Update records using VuexORM update or insertOrUpdate then persist changes to IndexedDB | | $replace | Like VuexORM create, but also replace all data from IndexedDB | | $delete | Like VuexORM delete, but also remove data from IndexedDB | | $deleteAll | Like VuexORM deleteAll, but also delete all data from IndexedDB |

Example Usage

<template>
  <div>
    <input type="text" v-model="todo">
    <input type="button" @click="addTodo">

    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
  import Todo from './store/models/Todo'

  export default {
    data () {
      return {
        todo: ''
      }
    },

    computed: {
      todos () {
        return Todo.query().all()
      }
    },

    async mounted () {
      // Load todos from IndexedDB
      await Todo.$fetch()
    },

    methods: {
      addTodo () {
        if (this.todo) {
          // Insert the todo in VuexORM Store and also persist it to IndexedDB
          Todo.$create({
            title: this.todo
          })
        }
      }
    }
  }
</script>

Configuration Options

These are options you can pass when calling VuexORM.use()

{
  // The VuexORM Database instance
  database,

  /**
   * LocalForage config options
   *
   * @see https://github.com/localForage/localForage#configuration
   */
  localforage: {
    name: 'vuex', // Name is required
    ...
  },

  /**
   * You can override names of actions introduced by this plugin
   */
  actions: {
    $get: '$get',
    $fetch: '$fetch',
    $create: '$create',
    $update: '$update',
    $replace: '$replace',
    $delete: '$delete',
    $deleteAll: '$deleteAll'
  }
}

You can also override localforage config per model

class Post extends Model {
  static localforage = {
    driver: localforage.WEBSQL,
    storeName: 'my_posts'
  }
}

Using with other VuexORM Plugin

There may be a conflict when using this plugin along with other VuexORM plugins as they are following the same API (aka they introduced the same actions: $fetch, $create...)

Just override actions names like that

VuexORM.use(VuexORMLocalForage, {
  database,
  actions: {
    $get: '$getFromLocal',
    $fetch: '$fetchFromLocal',
    $create: '$createLocally',
    $update: '$updateLocally',
    $replace: '$replaceLocally',
    $delete: '$deleteFromLocal',
    $deleteAll: '$deleteAllFromLocal'
  }
})

Then

Post.$fetchFromLocal() // instead of Post.$fetch()
...