mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-05-28 02:49:17 +08:00
60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useStore } from 'vuex'
|
||
import { storeToRefs } from 'pinia'
|
||
import { usePiniaState } from '@/store/testPinia'
|
||
|
||
import logo from '@/assets/logo.png'
|
||
|
||
// vuex
|
||
// const vuexStore = useStore()
|
||
|
||
// pinia
|
||
const piniaStore = usePiniaState()
|
||
|
||
// vuex
|
||
// const userName = computed(() => vuexStore.state.userNmae)
|
||
|
||
// 通过storeToRefs方法将存储在pinia里的数据解构出来，保持state响应性
|
||
const { userName } = storeToRefs(piniaStore)
|
||
const { getUserNmae } = piniaStore
|
||
|
||
|
||
const handleBtn = () =>{
|
||
// vuex
|
||
// vuexStore.commit('userName','真乖，如果对您有帮助请在github上点个星星哦~')
|
||
|
||
// pinia
|
||
getUserNmae('真乖，如果对您有帮助请在github上点个星星哦~')
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="about">
|
||
<CustomHeader title="我的" />
|
||
<div class="wrapper">
|
||
<div class="list flex-center py-8 flex-column">
|
||
<span class="logo">
|
||
<van-image width="150" :src="logo" />
|
||
</span>
|
||
<span class="logo fs-1 py-3 opacity-75">VUE3 H5开发模板</span>
|
||
<span class="fs-6 py-3 opacity-75">
|
||
项目地址：
|
||
<a href="https://github.com/talktao/Vue3-Vite-Vant-TS-H5">https://github.com/talktao/Vue3-Vite-Vant-TS-H5</a>
|
||
</span>
|
||
<span class="fs-3 py-3 opacity-75">项目作者：talktao</span>
|
||
<span class="fs-3 py-3 opacity-75">
|
||
{{ userName }}
|
||
<van-button v-if="userName == ''" color="#f50" size="small" @click="handleBtn">点我有魔法~</van-button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style> |