Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eldomagan/vuex-orm-localforage
Vuex ORM persistence plugin to sync the store against IndexedDB using localforage
https://github.com/eldomagan/vuex-orm-localforage
indexeddb localforage vue vuex vuex-orm vuex-orm-plugin vuex-plugin
Last synced: 24 days ago
JSON representation
Vuex ORM persistence plugin to sync the store against IndexedDB using localforage
- Host: GitHub
- URL: https://github.com/eldomagan/vuex-orm-localforage
- Owner: eldomagan
- License: mit
- Created: 2018-11-01T11:18:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:36:49.000Z (almost 2 years ago)
- Last Synced: 2024-02-17T11:36:13.120Z (9 months ago)
- Topics: indexeddb, localforage, vue, vuex, vuex-orm, vuex-orm-plugin, vuex-plugin
- Language: JavaScript
- Size: 866 KB
- Stars: 58
- Watchers: 5
- Forks: 9
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://standardjs.com)
[](https://github.com/eldomagan/vuex-orm-localforage/blob/master/LICENSE.md)
# Vuex ORM Plugin: LocalForage
VuexORMLocalforage is a plugin for the amazing [VuexORM](https://github.com/vuex-orm/vuex-orm) that let you sync your [Vuex](https://github.com/vuejs/vuex) Store with an IndexedDB database using [LocalForage](https://github.com/localForage/localForage).
## Installation
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
## 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
```vue
- {{ todo.title }}
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
})
}
}
}
}
```
## 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'
}
}
```
## 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
```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()
...
```