feat:useMermoize

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.4.1",
+    "axios": "^1.5.1",
     "compressorjs": "^1.2.1",
     "resize-textarea-vue3": "^1.1.3",
     "v-onboarding": "^2.5.2",

src/App.vue

@@ -69,6 +69,10 @@ const links = ref([
   {
     text: 'Vmemo',
     to: '/vmemo'
+  },
+  {
+    text: 'UseMemoize',
+    to: '/useMemoize'
   }
 ]);
 </script>

src/api/freeApi.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+export default {
+  async getUser() {
+    try {
+      const response = await axios.get('/user?ID=12345');
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};

src/router/index.js

@@ -85,6 +85,11 @@ const routes = [
     path: '/vmemo',
     name: 'Vmemo',
     component: () => import('../views/Vmemo.vue')
+  },
+  {
+    path: '/useMemoize',
+    name: 'UseMemoize',
+    component: () => import('../views/UseMemoize.vue')
   }
 ];
 

src/views/UseMemoize.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="container">
+    <h1 class="mb-4">UseMemoize範例</h1>
+    <hr />
+    <div class="flex mt-4">
+      <button @click="getData(1)">獲取數據1</button>
+      <button @click="getData(2)">獲取數據2</button>
+    </div>
+    <div class="mt-4">
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useMemoize } from '@vueuse/core';
+import axios from 'axios';
+
+const data = ref(null);
+
+const getUseMemoizeData = useMemoize(async id => {
+  const url = `https://jsonplaceholder.typicode.com/todos/${id}`;
+  const { data } = await axios.get(url);
+  return data;
+});
+
+const getData = async id => {
+  await getUseMemoizeData(id).then(res => {
+    data.value = res;
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+button {
+  @apply border border-green-500 block m-2 bg-white p-2;
+}
+</style>