<template>
  <view>
    <text class="title" >count: {{ count }}</text>
    <view class="button" @tap="onAdd">ADD</view>
  </view>
</template>

<script>
import { computed, nextTick, ref, watchEffect, watch } from 'vue'
import { useStore, } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    const visible = ref(true)

    watch(count, (newVal, oldVal) => {
      // 可以获取新旧值
      console.log(`Count changed from ${oldVal} to ${newVal}`)
    })

    const onAdd = async () => {
      store.commit('increment')
      visible.value = false
      await nextTick()
      visible.value = true
    }
    return {
      count,
      onAdd,
      visible,
    }
  }
}
</script>

<style>
.title {
  font-size: 32px;
}
.button {
  border: 1px solid lightgray;
  padding: 5px 10px;
}
</style>
