hjyd-mobile/src/components/Count.vue

<template>
  <div class="bg">
    <span>当前数值{{ countComputed }}</span>
    <br />
    <span>双倍数值{{ doubleCount }}</span>
    <br />
    <button type="primary" size="default" @click="countStore.countAdd">
      +1
    </button>
    <button type="primary" size="default" @click="countStore.countReduce">
      -1
    </button>
  </div>
</template>
<script setup>
import { computed, onMounted } from 'vue'
import { get15DaysWeatherByArea } from '@/api'
import { useCountStore } from '@/store'
import { storeToRefs } from 'pinia'
const countStore = useCountStore()
// 通过计算属性
const countComputed = computed(() => countStore.count)
// 通过 storeToRefs api 结构
const { doubleCount } = storeToRefs(countStore)
onMounted(() => {
  get15DaysWeatherByArea()
})
</script>
<style scoped lang="scss">
.bg {
  background: $bg-color;
}
</style>