chore: add talk demo

Author: posva

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))
+}

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>