Skip to content
This repository has been archived by the owner on Mar 18, 2020. It is now read-only.
/ vue-factory Public archive

A simple factory/provider extension for Vue.js, like services in Angular.

License

Notifications You must be signed in to change notification settings

ye-will/vue-factory

Repository files navigation

vue-factory

NO FARTHER ROADMAP NOW, BECAUSE

  • A similar feature named provide/inject has been invited to vue since 2.2.0
  • To manage data/states, please consider Vuex first

A factory/provider/service extension for vue.js

Requirements

  • Vue 2.x
  • Vue 1.x not tested
  • Proxy/Reflect compatible browser for full features

Installation

Install through npm

npm install vue-factory

Include vue-factory in after loading Vue and it will automatically hooked

<script src="/path/to/vue-factory.js'"></script>

Or with Webpack/Browserify projects, add these lines in your main.js

var Vue = require('vue');
var VueFactory = require('vue-factory');

Vue.use(VueFactory);

Useage

  1. write a factory Class/function:

    class FactoryExample {
      constructor () {
        this.const = 'not editable'
      }
      echo (something) {
        console.log(something)
      }
      get prop () {
        return 'get: ' + this.value
      }
      set prop (value) {
        this.value = value
      }
    }
    

    you can use this.$Vue in the factory Class to access the The global Vue API. For example, when working along with vue-resouce, this.$Vue.http is equivalent to Vue.http.

  2. register the factory Class:

    Vue.factory.register({
      'example': FactoryExample
    })
    
  3. declare providers that will be injected in the Vue component:

    as in a .vue file

    <script>
    ...
    export default {
       ...
       providers: ['example'],
       ...
    }
    ...
    </script>
    
  4. then, you can access the provider in the component using:

    this.example.echo("ok") // "ok"
    this.example.prop // get: undefined
    this.example.prop = "changed"
    this.example.prop // get: changed
    

    note that all of the providers are Singletons, if you inject the example provider into other components later, this.example.prop will get changed value.

Demo

Basic Example: Github
Working with Vuex: JSFiddle

About

A simple factory/provider extension for Vue.js, like services in Angular.

Resources

License

Stars

Watchers

Forks

Packages

No packages published