use class in state

[APerricone]

Hi, I need help for this piece of code:

<script>
    // this class can not be modified
    function ValueCnt() {
        this.value = 0;
    }
    let stateClass = $state(new ValueCnt());
    let stateObj = $state({value:0});

    function incrementClass() {
        stateClass.value += 1;
        console.log(`value inside class is ${stateClass.value}`);            
    }

    function incrementObj() {
        stateObj.value += 1;
        console.log(`value inside obj is ${stateObj.value}`);            
    }
</script>

<button onclick={incrementClass}>
	increment class
</button>
<button onclick={incrementObj}>
	increment obj
</button>

<p>{stateClass.value} inside class</p>
<p>{stateObj.value} inside obj</p>

Here we can see that the button "increment obj" works fine and the button "increment class" doesn't... how can i fix it?

I tried it on playground

[david-plugge]

$state proxifies objects but cant do that with classes

[APerricone]

ok, the question is simple: can i proxify my class? or simply notify that is changed? I am a little ignorant about this

[brunnerh]

You can wrap the object and assign a new one on change. E.g.

let stateClass = $state({ counter: new ValueCnt() });

stateClass.counter.value += 1;
stateClass = { ...stateClass }; // force reactivity via new object

Playground

See also this issue:

• Proposal: a way to make non-POJOs reactive #10560

[APerricone]

Many thanks for providing a solution and for having pointed me the thread about this issue... i was pretty sure i am not the first with this issue but i was confident that the problem was me