3 - losing-reactivity

[zhangmo8]

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

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

  function update(value: number) {
    state.count = value
  }

  return {
    state,
    update,
  }
}

// Make ensure the destructure without losing reactivity
const { state: { count }, update } = $(useCount())

</script>

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

[plus50]

@wegi8

hi~
Could you plz explain where does this $ come from?

[zhangmo8]

@wegi8

hi~

Could you plz explain where does this $ come from?

@erica-plus It's just a grammar sugar on Vue.

[plus50]

@wegi8

thank you very much! 🤣
i forgot this chapter: 响应性语法糖

[bLanK-NULL]

$ grammar sugar donesn't work anymore even if I switch the version to 3.3.X