Vue 3 - Make the specific class properties reactive

user_10118104 0
Viewed 1442

Is there any possibility to make some properties of the class instance reactive?

In the MobX it's fairly easy to do:

class Doubler {
    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
        })
        this.value = value
    }

    get double() {
        return this.value * 2
    }
}

But it looks like impossible to do it in Vue.

1.The most closest result that I get is the following result:

class Doubler {
    constructor(value) {
        this.value = ref(value)
        this.double = computed(() => this.value.value * 2) // Ugly
    }
}

The computed code is ugly and it's using also differs:

const doubler = new Doubler(1)
double.value = 2 // No way!
double.value.value = 2 // That's it! Ugly, but that's it.

2.I can pass the created object to reactive function, but it make all properties reactive and it doesn't affect the internal implementation and it still will be ugly.

Is there any way to reproduce MobX approach in Vue?

vue-reactivity vuejs3 vue.js
1 Answers

I don't think you can achieve it with classes. With objects though, the closest thing I can think of is something like this:

function createDoubler(value) {
  const doubler = reactive({ value })
  doubler.double = computed(() => state.value * 2)
  return doubler
}

const doubler = createDoubler(4)
doubler.value // 4
doubler.value = 5
doubler.double // 10

EDIT: After giving it another thought I came up with the following solution:

class Doubler {
  constructor(value) {
    this._state = reactive({ value });
  }

  get value() {
    return this._state.value;
  }

  set value(value) {
    return this._state.value = value;
  }

  get double() {
    return this._state.value * 2;
  }
}

If you want to use ref instead of reactive:

class Doubler {
  constructor(value) {
    this._value = ref(value);
  }

  get value() {
    return unref(this._value);
  }

  set value(value) {
    return this._value = value;
  }

  get double() {
    return this.value * 2;
  }
}

Link to CodeSandbox

user_15608270
Related