feat: pinia

package.json

@@ -58,6 +58,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
     "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+    "pinia": "^2.2.2",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"
   },

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       '@dcloudio/uni-quickapp-webview':
         specifier: 3.0.0-4020420240722002
         version: 3.0.0-4020420240722002(postcss@8.4.45)(rollup@4.21.3)(vue@3.5.5(typescript@4.9.5))(webpack-sources@3.2.3)
+      pinia:
+        specifier: ^2.2.2
+        version: 2.2.2(typescript@4.9.5)(vue@3.5.5(typescript@4.9.5))
       vue:
         specifier: ^3.4.21
         version: 3.5.5(typescript@4.9.5)
@@ -3148,6 +3151,18 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pinia@2.2.2:
+    resolution: {integrity: sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -3732,6 +3747,17 @@ packages:
       terser:
         optional: true
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-i18n@9.14.0:
     resolution: {integrity: sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==}
     engines: {node: '>= 16'}
@@ -8048,6 +8074,14 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pinia@2.2.2(typescript@4.9.5)(vue@3.5.5(typescript@4.9.5)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.5(typescript@4.9.5)
+      vue-demi: 0.14.10(vue@3.5.5(typescript@4.9.5))
+    optionalDependencies:
+      typescript: 4.9.5
+
   pirates@4.0.6: {}
 
   pixelmatch@4.0.2:
@@ -8661,6 +8695,10 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.32.0
 
+  vue-demi@0.14.10(vue@3.5.5(typescript@4.9.5)):
+    dependencies:
+      vue: 3.5.5(typescript@4.9.5)
+
   vue-i18n@9.14.0(vue@3.5.5(typescript@4.9.5)):
     dependencies:
       '@intlify/core-base': 9.14.0

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