feat: pinia

This commit is contained in:
2024-09-14 21:21:30 +08:00
parent 000eb1c790
commit c687634393
6 changed files with 81 additions and 1 deletions

13
src/components/TabBar.vue Normal file
View File

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

View File

@ -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,
};

View File

@ -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>

10
src/stores/user.ts Normal file
View File

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