Set up pinia

gdn-app/package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@tauri-apps/api": "^2.2.0",
     "@tauri-apps/plugin-opener": "^2.2.5",
+    "pinia": "^2.3.1",
     "tailwindcss": "^4.0.0",
     "vue": "^3.5.13"
   },

gdn-app/src/App.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import Navbar from "./components/Navbar.vue";
+import Test from "./components/Test.vue";
+import { useFooStore } from "./stores/foo";
+
+const foo = useFooStore();
 </script>
 
 <template>
   <div class="flex h-screen touch-pan-x touch-pan-y flex-col">
     <Navbar />
     <div class="h-full overflow-auto">
+      <Test />
+      <br />
+      Yes, it's now {{ foo.name }}.
       <template v-for="_ in 6">
         <p class="p-1 font-thin">The quick brown fox Qiii</p>
         <p class="p-1 font-extralight">The quick brown fox Qiii</p>

gdn-app/src/components/Test.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useFooStore } from "@/stores/foo";
+
+const foo = useFooStore();
+</script>
+
+<template>
+  Foo is {{ foo.name }}.
+  <button @click="foo.setName('bar')">Change to bar.</button>
+</template>

gdn-app/src/main.ts

@@ -1,4 +1,5 @@
+import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";
 
-createApp(App).mount("#app");
+createApp(App).use(createPinia()).mount("#app");

gdn-app/src/stores/foo.ts

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useFooStore = defineStore("foo", () => {
+  const name = ref("foo");
+
+  function setName(to: string) {
+    name.value = to;
+  }
+
+  return { name, setName };
+});