|
|
|
@ -1,33 +0,0 @@ |
|
|
|
<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> |
maochaoying
2 years ago