chr-vue-instance v0.1.1

chr-vue-instance

Main feature is just construct an object for vue.

Usage

<!--*.vue-->
...
<script>
import vueIns from 'chr-vue-instance';
const vueInstance = new vueIns();

vueInstance.data({
    msg:'Hello world'
});

vueInstance.mounted(function(){
    this.msg;
});

export default vueInstance.getInstance();
</script>
...

Inspiration source

Just so tired to write all of the logic in one Object, and don't want to make same start in every places of vue just like:

const vueInstance={};
vueInstance.created=()=>{
    xxx
}
vueInstance.data=()=>({
    msg:'I want to sleep'
});
...

methods for now

There are only a few of the methods I always use. Others can be used by original vm too.

all lifecycle hooks

Finally, all the functions put in will be execute.
Every function has original vue instance.

vueInstance.beforeDestroy(()=>{console.log('destroy!!!')});
vueInstance.mounted( () => {console.log('method one');} );

vueInstance.data({ twice:'method two' });
vueInstance.mounted( () => {console.log(this.twice);} );        // ✖ Notice the arrow function can't use in this way
vueInstance.mounted( vm => {console.log(vm.twice)} );           // ✔ use vm param instead
vueInstance.mounted( function(){console.log(this.twice);} );    // ✔ or normal anonymous function

new Vue(vueInstance.getInstance());

// method one
// error: xxx.twice undefined
// method two
// method two
// destroy!!!

props

props can be string,array,object
last obj will cover the previous.

vueInstance.props('hehe');
vueInstance.props(['haha']);
vueInstance.props({ 'hoho':{ type:String }          });
vueInstance.props({ 'hoho':{ default:'unhappy😒' } });

const vio = vueInstance.getInstance();
// !Notice before new Vue instance, props
console.log(vio.props);

// in lifecycle hooks should use $props:
vueInstance.mounted(vm=>{
    console.log(vm.$props);
});

// after new Vue
const vm = new Vue(vio);
console.log(vio.props);    //vue instance object will not change
console.log(vm.$props);

//Object {
//    haha:null
//    hehe:null
//    hoho:{ type:xxx, default:"unhappy😒" }
//}

data

just accept obj, will merge with previous too:

vueInstance.data({
    msg:'haha'
});
vueInstance.data({
    test:'s.b. chreem'
});
const vm = vueInstance.getInstance();
console.log(vm.data);

// { msg:"haha", test:"s.b. chreem" }

computed

only accept function in obj...
it can't bring vue instance in method...
I temporary don't think of a more graceful way to solve this and methods yet.
Of course this still work.

vueInstance.computed({
    test(){ return 'test' }
});

vueInstance.data({ msg:'hello' });
vueInstance.computed({
    wow(){ return this.msg+' world' }
});
vueInstance.mounted( vm=>{
    console.log(vm.test, vm.wow);
} );

// test hello world

methods

same with computed, even shortcoming...
so, let me skip demo...

others

Other methods can be used as usual:

const vm = vueInstance.getInstance();
vm.name='test';
vm.components={ xxx,xxxx... };
vm.watch={...};
new Vue(vm);

TODOs

Because lower technical level of mine, there are a few compromise...

• computed,methods could only put function too: vueInstance.methods(function test(){})

License MIT