Vue3+TS代码风格

最新推荐文章于 2025-05-26 13:19:17 发布

原创最新推荐文章于 2025-05-26 13:19:17 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

31 篇文章

订阅专栏

该代码示例展示了如何在Vue组件中使用<scriptsetup>语法糖，导入useStore来访问Vuexstore，以及onMounted生命周期钩子。定义了一个ref绑定的count变量和addCount方法，点击按钮时增加计数。同时，展示了从store中获取loginData的信息。

<script setup lang="ts">
	import {
		useStore
	} from '@/store/useStore'
	import {
		ref,
		onMounted,

	} from 'vue'

	//定义传入接收值
	defineProps < {
		// msg: string 
	} > ()

	const store = useStore()

	onMounted(() => {
		console.log("进入组件")
		console.log(store.loginData)
	})



	//定于变量
	const count = ref(0)

	//定义方法
	const addCount = () => {
		console.log(count.value++)
	}
</script>

<template>

	<div>
		<button type="button" @click="addCount">count is {{ count }}</button>
		登录
	</div>

</template>

<style scoped>

</style>