3 - losing-reactivity

[smallma]

<script setup lang="ts">
import { reactive } from "vue"

const state = reactive({
  count: 0,
})

function update(value: number) {
  state.count = value;
}
</script>

<template>
  <div>
    <p>
      <span @click="update(state.count-1)">-</span>
      {{ state.count }}
      <span @click="update(state.count+1)">+</span>
    </p>
  </div>
</template>

[smallma]

<script setup lang="ts">
import { reactive, toRefs } from "vue"

function useCount() {
  const state = reactive({
    count: 0,
  })

  function update(value: any, addNum) {
    console.log('value.count: ', value.count.value);
    state.count = value.count.value + addNum;
  }

  return {
    state: toRefs(state),
    update,
  }
}

// Ensure the destructured properties don't lose their reactivity
const { state, update } = useCount()
</script>

<template>
  <div>
    <p>
      <span @click="update(state, -1)">-</span>
      {{ state.count }}
      <span @click="update(state, 1)">+</span>
    </p>
  </div>
</template>