feat: pinia
This commit is contained in:
13
src/components/TabBar.vue
Normal file
13
src/components/TabBar.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
tabbar
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -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,
|
||||
};
|
||||
|
@ -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
10
src/stores/user.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useUserStore = defineStore("user", () => {
|
||||
const count = ref(0);
|
||||
|
||||
return {
|
||||
count,
|
||||
};
|
||||
});
|
Reference in New Issue
Block a user