Necessary Pigeonholing Mechanism

    vue-feathers-hotload

    0.2.3 • Public • Published

    vue-feathers-hotload

    Automatically load/reload data from feathers services to vue components. Load queries are live and reactive. Feathers client must be configured with feathers-reactive.

    Install

    npm i -S vue-feathers-hotload

    Usage

    In entry js:

    import app from 'pathToYourFeathersClient' // configured feathers client app here
     
    app.use ...
     
    app.setup() // must use and setup all client-side services before Vue.use(VueFeathersHotload)
     
    import Vue from 'vue'
    import VueFeathersHotload from 'vue-feathers-hotload'
    Vue.use (VueFeathersHotload, app, {
      idField: 'id' // id field name for all services. '_id' by default
    })

    In Vue components:

    data: function () {
      return {
        a: ...,
        b: ...
      }
    },
    hotloads: function () {
      return {
        item: function () { // item would be an object containing the loaded data
          return {
            service: 'feathersServiceName',
            idField: 'id', // id field name for this services. '_id' by default
            id: function() {
              return {
                // the id of of the item. Can use this.a/b to make the id. Reactively reload when this.a/b changes
              }
            },
            then: function (result) {
              // do something when loaded/reloaded
            },
            catch: function (error) {
              // do something when laoding is failed
            }
          }
        }
        list: function () { // list would be an array containing the returned data, with proper list.length/total/limit/skip properties. The list is an object too, and items can be accessed via `list[id]`
          return {
            service: 'feathersServiceName',
            idField: 'id', // id field name for this services. '_id' by default
            query: function() {
              return {
                // your live query here. Can use this.a/b in query. Reactively reload when this.a/b changes
                // $limit, $skip, $sort, $select, $in, $lt ... all supported and watched for live query
              }
            },
            object: true, // make
            then: function (result) {
              // do something when loaded/reloaded
            },
            catch: function (error) {
              // do something when laoding is failed
            }
          }
        }
      }
    }

    A more detailed example in coffee (I always tell you coffee is neat):

    data: ->
      id: 'xxxxxxx' # for item id below 
      sort: 1 # or -1, for $sort below 
      limit: 10 # for $limit below 
    hotloads: ->
      item: ->
        service: 'xxx'
        idField: 'id'
        id: -> this.id # will reload when this.id changes 
        then: (result) -> ...
        catch: (error) -> ...
      list: ->
        service: 'xxx'
        idField: 'id'
        qeury: ->
          someField: someValue
          $select: ['field1''field2'...]
          $sort:
            field1: this.sort # will reload when this.sort changes 
          $limit: this.limit # will reload when this.limit changes 
        then: (result) -> console.log result
        catch: (error) -> console.log error
     

    Then this.item, this.list, this.list.total/limit/skip/length can be used in your Vue component.

    Bonus: reading/writing flags for cached services

    If you are using feathers-cache, any cached services have extra flags to show if the services are reading from or writing to the remote server. And the bonus is, once vue-feathers-hotload is used, these reading/writing flags become reactive and can be directly used in vue component. For example:

    import cache from 'feathers-cache'
    app.use 'cachedServiceName'cache {...} # define your client-side cached service 
    app.setup() # initialize services 
     
    import Vue from 'vue'
    import VueFeathersHotload from 'vue-feathers-hotload'
    Vue.use VueFeathersHotloadapp

    Now you can do this in your vue component's <script>:

    computed:
      # the three are identical 
      myService1: -> this.$feathers.services.cachedServiceName
      myService2: -> this.$services.cachedServiceName
      myService3: -> this.$feathers.service(cachedServiceName)
     

    And in your component's <template>:

    <div>{{myService1.loading}}</div>
    <div v-if="myService2.saving">...</div>

    Install

    npm i vue-feathers-hotload

    DownloadsWeekly Downloads

    0

    Version

    0.2.3

    License

    MIT

    Last publish

    Collaborators

    • beeplin