From ff8637a62643b3a4c8e08c9404fc2d0a453937d0 Mon Sep 17 00:00:00 2001
From: L&H <abc@hub.moe>
Date: Fri, 29 Mar 2024 16:40:44 +0800
Subject: [PATCH] feat(vue-demo): add defineExpose example

---
 apps/vue-demo/src/component/atom/CounterAtom.vue   |  7 +++++++
 apps/vue-demo/src/component/pinia/PiniaSection.vue | 13 ++++++++++++-
 apps/vue-demo/src/component/types.ts               |  7 +++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 apps/vue-demo/src/component/types.ts

diff --git a/apps/vue-demo/src/component/atom/CounterAtom.vue b/apps/vue-demo/src/component/atom/CounterAtom.vue
index 2438dc8..e196e05 100644
--- a/apps/vue-demo/src/component/atom/CounterAtom.vue
+++ b/apps/vue-demo/src/component/atom/CounterAtom.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive } from 'vue';
+import { ICounterRef } from '../types';
 
 let initValue = Math.round(Math.random() * 10);
 let timer: number = -1;
@@ -15,6 +16,12 @@ onMounted(() => {
     }, 1000);
 });
 
+defineExpose<ICounterRef>({
+    add(x: number) {
+        data.count += x;
+    },
+});
+
 onUnmounted(() => {
     clearInterval(timer);
 });
diff --git a/apps/vue-demo/src/component/pinia/PiniaSection.vue b/apps/vue-demo/src/component/pinia/PiniaSection.vue
index ab761a3..395a8b4 100644
--- a/apps/vue-demo/src/component/pinia/PiniaSection.vue
+++ b/apps/vue-demo/src/component/pinia/PiniaSection.vue
@@ -2,10 +2,21 @@
 import HeadingAtom from '../atom/HeadingAtom.vue';
 import CounterAtom from '../atom/CounterAtom.vue';
 import PiniaSubmit from './PiniaSubmit.vue';
+import { ref } from 'vue';
+import { ICounterRef } from '../types';
+
+const counterRef = ref<ICounterRef>();
+
+const onClick = () => {
+    if (counterRef.value) {
+        counterRef.value.add(100);
+    }
+};
 </script>
 
 <template>
     <HeadingAtom />
-    <CounterAtom />
+    <CounterAtom ref="counterRef" />
+    <button @click="onClick">+100</button>
     <PiniaSubmit />
 </template>
diff --git a/apps/vue-demo/src/component/types.ts b/apps/vue-demo/src/component/types.ts
new file mode 100644
index 0000000..6b61a9e
--- /dev/null
+++ b/apps/vue-demo/src/component/types.ts
@@ -0,0 +1,7 @@
+/**
+ * Demo for shared types
+ */
+
+export interface ICounterRef {
+    add(x: number): void;
+}