vuex-orm-cordova

    0.1.0 • Public • Published

    JavaScript Style Guide License

    Vuex ORM Plugin: LocalForage

    VuexORMCordova is a fork of VuexORMLocalForage that lets you sync your Vuex store with a Cordova SQLite database using LocalForage.

    Installation

    Install Cordova-sqlite-storage plugin

    cordova plugin add cordova-sqlite-storage

    Add the package to your dependencies

    yarn add vuex-orm-cordova

    Or

    npm install --save vuex-orm-cordova

    Then you can setup the plugin

    import VuexORM from '@vuex-orm/core'
    import VuexORMCordova from 'vuex-orm-cordova'
     
    const database = new VuexORM.Database()
     
    VuexORM.use(VuexORMCordova, {
      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()
    ...

    Install

    npm i vuex-orm-cordova

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    69.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar