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-localforageOr
npm install --save vuex-orm-localforageThen 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()
...