vuex-orm-lowdb
Vuex-ORM Plugin to sync the data with lowdb.
Last updated 5 months ago by linuxing3 .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install vuex-orm-lowdb 
SYNC missed versions from official npm registry.

JavaScript Style Guide License

Vuex ORM Plugin: Lowdb

VuexOrmLowdb is a plugin for the amazing VuexORM that let you sync your Vuex Store with Lowdb

Installation

Add the package to your dependencies

yarn add vuex-orm-lowdb

Or

npm install --save vuex-orm-lowdb

Then you can setup the plugin

import VuexORM from '@vuex-orm/core'
import VuexOrmLowdb from 'vuex-orm-lowdb'

const database = new VuexORM.Database()

VuexORM.use(VuexOrmLowdb, {
  database,
  dbPath: "/public/data"
})

// ...

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 lowdb store associated to a model and persist them in the Vuex Store
$create Like VuexORM insert, but also persist data to lowdb
$update Like VuexORM update, but also persist changes to lowdb
$delete Like VuexORM delete, but also remove data from lowdb

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 () {
      await Todo.$fetch()
    },
    methods: {
      addTodo () {
        if (this.todo) {
          Todo.$create({
            title: this.todo
          })
        }
      },
      deleteTodo() {
        Todo.$delete({
          id: 1,
          title: this.todo
        })
      },
      updateTodo() {
        Todo.$update({
          id: 1,
          title: this.todo
        })
      },
    }
  }
</script>

Current Tags

  • 0.3.4                                ...           latest (5 months ago)

20 Versions

  • 0.3.4                                ...           5 months ago
  • 0.3.3                                ...           5 months ago
  • 0.3.2                                ...           5 months ago
  • 0.3.1                                ...           6 months ago
  • 0.3.0                                ...           6 months ago
  • 0.2.8                                ...           6 months ago
  • 0.2.7                                ...           6 months ago
  • 0.2.6                                ...           6 months ago
  • 0.2.5                                ...           6 months ago
  • 0.2.4                                ...           6 months ago
  • 0.2.3                                ...           6 months ago
  • 0.2.2                                ...           6 months ago
  • 0.2.1                                ...           6 months ago
  • 0.2.0                                ...           6 months ago
  • 0.1.6                                ...           6 months ago
  • 0.1.5                                ...           6 months ago
  • 0.1.4                                ...           6 months ago
  • 0.1.3                                ...           6 months ago
  • 0.1.2                                ...           6 months ago
  • 0.1.1                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 20
This Month 20
Last Day 0
Last Week 0
Last Month 40
Dependencies (5)
Dev Dependencies (17)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |