chr-vue-instance
v0.1.1
Published
Construct an object for vue
Downloads
4
Readme
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(){})