feat: pinia

src/components/TabBar.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    tabbar
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,9 +1,15 @@
 import { createSSRApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
+
 import "uno.css";
 
 export function createApp() {
+  const pinia = createPinia();
   const app = createSSRApp(App);
+
+  app.use(pinia);
+
   return {
     app,
   };

src/pages/index/index.vue

@@ -2,13 +2,25 @@
   <div class="content">
     <img class="logo" src="/static/logo.png" />
     <div class="text-area">
-      <p class="title text-red-500">{{ title }}</p>
+      <p class="title text-red-500">
+        {{ title }}
+        <span>{{ user.count }}</span>
+      </p>
+      <button @click="onClick">increment</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useUserStore } from '@/stores/user';
 import { ref } from 'vue'
+
+const user = useUserStore()
+
+const onClick = () => {
+  user.count++
+}
+
 const title = ref('Hello')
 </script>
 

src/stores/user.ts

@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUserStore = defineStore("user", () => {
+  const count = ref(0);
+
+  return {
+    count,
+  };
+});