@cabloy/front-quasar
@cabloy/front-quasar is a vue3 framework with ioc container. With the support of ioc container, defining reactive states no longer needs ref/reactive
, nor ref.value
![NPM download](https://img.shields.io/npm/dm/@cabloy/front-quasar?color=orange&label=npm%20downloads)
Documentation
Features
@cabloy/front-quasar has introduced the following distinct features for Vue3:
No ref/reactive
: With the support of ioc container, defining reactive states no longer needs ref/reactive
No ref.value
: Without ref
, naturally there is no need to write a lot of ref.value
Modularization
: In a large web business system, as the business grows and changes, it is also necessary to divide the system into relatively independent modules in order to avoid code bloating. This is why Cabloy-Front introduces modularization
Gif demonstration
![No ref/reactive](https://github.com/cabloy/cabloy-front/raw/HEAD/../cabloy-docs/assets/img/state-no-ref-reactive.gif)
Demonstration: no ref/reactive
, no ref.value
1. Define reactive state
Define a reactive variable count
in the component and add two methods to modify its value
export class ControllerPageCounter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
2. Use reactive state
Use count
in render class
export class RenderPageCounter {
render() {
return (
<div>
<div>count(ref): {this.count}</div>
<button onClick={() => this.inrement()}>Inrement</button>
<button onClick={() => this.decrement()}>Decrement</button>
</div>
);
}
}
Demonstration: dependency injection
1. Logic Reuse
Create a Counter
Bean to implement the logic of count
@Local()
export class Counter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
2. Inject and use in a component
export class ControllerPageCounter {
@Use()
$$counter: Counter;
}
export class RenderPageCounter {
render() {
return (
<div>
<div>count(ref): {this.$$counter.count}</div>
<button onClick={() => this.$$counter.inrement()}>Inrement</button>
<button onClick={() => this.$$counter.decrement()}>Decrement</button>
</div>
);
}
}
Stay In Touch
License
MIT
Copyright (c) 2016-present, CabloyJS