Snippet

Encapsulating Business Logic with Class Models in Shallow Reactive State

Deep reactivity proxies in Vue can disrupt class instances that rely on private fields (`#field`) or strict prototype inheritance. By utilizing `shallowReactive`, developers can safely integrate object-oriented domain models with encapsulated private state while still tracking top-level object mutations in the UI.

snippet.js

javascript

import { shallowReactive } from 'vue';
 
class BankAccount {
  #balance = 0;
 
  constructor(initialBalance) {
    this.#balance = initialBalance;
  }
 
  deposit(amount) {
    if (amount <= 0) throw new RangeError('Deposit must be positive');
    this.#balance += amount;
  }
 
  get balance() {
    return this.#balance;
  }
}
 
const accountState = shallowReactive(new BankAccount(100));

vue

Breakdown

class BankAccount {

Defines an object-oriented domain model implementing business invariants and encapsulation.

#balance = 0;

Declares a truly private ECMAScript class field inaccessible from outside the class scope.

const accountState = shallowReactive(new BankAccount(100));

Wraps the class instance in a shallow reactive proxy to avoid breaking private field accessors.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Encapsulating Business Logic with Class Models in Shallow Reactive State

Related