VUE3 Composition API调用侠参考手册

<template>
  <div>
    <div class="form">
      <p><label for="">firstName: <input type="text" v-model="data.firstName"></label></p>
      <p><label for="">lastName: <input type="text" v-model="data.lastName"></label></p>
      <p>hp: {{data.hp}}</p>
    </div>
    <p>{{data.firstName}} - {{data.lastName}}</p>
    <p>{{fullName}}</p>
    <button @click="randomHP">再随机一次</button>
    <button @click="goAdventure">出发</button>
  </div>
</template>

<script>
  import { reactive, ref, onMounted, watch, computed } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { useStore } from "vuex";

  export default {

    setup(props, context) {
      const router = useRouter();
      const route = useRoute();
      const store = useStore();
      onMounted(() => {
        let { id } = route.query;
        randomHP()
      })
      const data = reactive({
        firstName: "maple",
        lastName: "island",
        hp: undefined
      })
      watch(props, () => {
        
      })
      const fullName = computed(() => {
        return data.firstName + data.lastName
      })
      function goAdventure() {
        // store.commit("storeInfo", data)
        router.push({
          name: "adventure"
        })
      }
      function randomHP() {
        data.hp = Math.trunc(Math.random() * 10)
      }
      return {
        data,
        fullName,
        randomHP,
        goAdventure,
      }
    }
  }
</script>

未完待续...