shallow-reactive.uvue

<template>
  <view class="page">
    <text id="state-count" class="uni-common-mb">state.count: {{ state.count }}</text>
    <text id="state-nested-count" class="uni-common-mb">state.nested.count: {{ state.nested.count }}</text>
    <button id="increment-state-count-btn" class="uni-common-mb" @click="incrementStateCount">
      increment state.count
    </button>
    <button id="increment-state-nested-count-btn" @click="incrementStateNestedCount">
      increment state.nested.count
    </button>
  </view>
</template>

<script setup>
  type StateNested = {
    count : number
  }
  type State = {
    count : number,
    nested : StateNested
  }
  const state = shallowReactive({
    count: 0,
    nested: {
      count: 0
    } as StateNested
  } as State)

  const incrementStateCount = () => {
    state.count++
  }

  const incrementStateNestedCount = () => {
    state.nested.count++
  }
</script>