@cabloy/front-quasar

@cabloy/front-quasar

@cabloy/front-quasar is a vue3 framework with ioc container. No ref/reactive, no ref.value, no pinia

Documentation

Documentation can be found at https://front.cabloy.com.

Features

@cabloy/front-quasar has introduced the following distinct features for Vue3:

• No ref/reactive: Because in most scenarios, there is no need to use ref and reactive
• No ref.value: Because defining reactive variables in Cabloy-Front is more intuitive and no longer requires ref semantics
• No pinia: Because Cabloy-Front provides an ioc container, which can more flexibly define and use global objects

Gif demonstration

Demonstration: no ref/reactive, no ref.value

1. Define reactive state

@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

2. Use reactive state

@Local()
export class RenderPageCounter extends BeanRenderBase {
  render() {
    return (
      <div>
        <div>counter(ref): {this.counter}</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 counter

@Local()
export class LocalCounter extends BeanBase {
  counter: number = 0;

  inrement() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

2. Inject and use in a component

@Local()
export class MotherPageCounter extends BeanMotherPageBase {
  @Use()
  $$counter: LocalCounter;
}

@Local()
export class RenderPageCounter extends BeanRenderBase {
  render() {
    return (
      <div>
        <div>counter(ref): {this.$$counter.counter}</div>
        <button onClick={() => this.$$counter.inrement()}>Inrement</button>
        <button onClick={() => this.$$counter.decrement()}>Decrement</button>
      </div>
    );
  }
}

Stay In Touch

• Twitter
• Wechat

License

MIT

Copyright (c) 2016-present, zhennann