<template>
<div class="person">
<h2>当前求和为：{{sum}}</h2>
<button @click="increment">点我+1</button>
<button @click="decrement">点我-1</button>

<br>
  <img v-for="(dog,index) in dogList" :src="dog" :key="index" >
  <button @click="getDog">再来一只狗</button>
</div>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'App',
  })
</script>

<script setup lang="ts">
  import useSum from '@/hooks/useSum'
  import useDog from '@/hooks/useDog'
	
  let {sum,increment,decrement} = useSum()
  let {dogList,getDog} = useDog()
</script>

<style scoped>
.person{
  width: 200px;
  height: 200px;
  background-color: palegoldenrod;
}
img{
  width: 100%;
  height: auto;
}
</style>