chore: add talk demo

diff --git a/packages/playground/src/stores/demo-counter.ts b/packages/playground/src/stores/demo-counter.ts
new file mode 100644 (file)
index 0000000..59235f4
--- /dev/null
+++ b/packages/playground/src/stores/demo-counter.ts
@@ -0,0 +1,11 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useCounter = defineStore('counter', {
+  state: () => ({
+    n: 0,
+  }),
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCounter, import.meta.hot))
+}

diff --git a/packages/playground/src/views/DemoCounter.vue b/packages/playground/src/views/DemoCounter.vue
new file mode 100644 (file)
index 0000000..c80cb1b
--- /dev/null
+++ b/packages/playground/src/views/DemoCounter.vue
@@ -0,0 +1,21 @@
+<template>
+  <h2>Counter Store</h2>
+
+  <p>Counter :{{ counter.n }}. Double: {{ counter.double }}</p>
+
+  <button @click="counter.n++">Increment</button>
+
+  <hr />
+
+  <p>
+    <code>counter.$state</code>:
+  </p>
+
+  <pre>{{ counter.$state }}</pre>
+</template>
+
+<script lang="ts" setup>
+import { useCounter } from '../stores/demo-counter'
+
+const counter = useCounter()
+</script>