Vuex-ORM Plugin to sync the data against an indexedDB using localforage.
npm install vuex-orm-localforage
VuexORMLocalforage is a plugin for the amazing VuexORM that let you sync your Vuex Store with an IndexedDB database using LocalForage.
Add the package to your dependencies
``shell`
yarn add vuex-orm-localforage
Or
`shell`
npm install --save vuex-orm-localforage
Then you can setup the plugin
` js
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
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 | Update records using VuexORM or insertOrUpdate then persist changes to IndexedDB |create
| $replace | Like VuexORM , but also replace all data from IndexedDB |delete
| $delete | Like VuexORM , but also remove data from IndexedDB |deleteAll
| $deleteAll | Like VuexORM , but also delete all data from IndexedDB |
` vue
`Configuration Options
These are options you can pass when calling VuexORM.use()
`js
{
// 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
`js`
class Post extends Model {
static localforage = {
driver: localforage.WEBSQL,
storeName: 'my_posts'
}
}
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
`js`
VuexORM.use(VuexORMLocalForage, {
database,
actions: {
$get: '$getFromLocal',
$fetch: '$fetchFromLocal',
$create: '$createLocally',
$update: '$updateLocally',
$replace: '$replaceLocally',
$delete: '$deleteFromLocal',
$deleteAll: '$deleteAllFromLocal'
}
})
Then
`js``
Post.$fetchFromLocal() // instead of Post.$fetch()
...