@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

• Get Started
• Why Vue3+IOC?

Features

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

1. No ref/reactive: Class instances support reactive by default, so the state in the instance does not need to be declared reactive through ref/reactive. Additionally, usage of raw data and partially reactive is still supported
2. No ref.value: Without ref, naturally there is no need to write a lot of ref.value
3. No pinia: Global state objects can be created directly based on the global IOC container

Gif demonstration

Demonstration: no ref/reactive, no ref.value

1. Define reactive state

export class MotherPageCounter {
  count: number = 0;

  inrement() {
    this.count++;
  }

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

2. Use reactive state

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 counter

@Local()
export class Counter {
  count: number = 0;

  inrement() {
    this.count++;
  }

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

2. Inject and use in a component

export class MotherPageCounter {
  @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

• Twitter
• Wechat

License

MIT

Copyright (c) 2016-present, zhennann