vue实现用户信息
Vue 实现用户信息管理
数据绑定与表单处理
使用 Vue 的 v-model 实现表单双向绑定，快速收集用户输入信息。示例代码展示基础表单结构：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="user.name" placeholder="姓名">
<input v-model="user.email" placeholder="邮箱">
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
email: ''
}
}
},
methods: {
handleSubmit() {
console.log('提交数据:', this.user)
}
}
}
</script>状态管理方案
对于复杂应用，推荐使用 Vuex 或 Pinia 集中管理用户状态。Pinia 的现代式状态管理示例：
// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
profile: null,
token: ''
}),
actions: {
async fetchUser() {
const res = await api.get('/user')
this.profile = res.data
}
}
})接口请求封装
使用 axios 进行 HTTP 请求，配合 async/await 处理异步操作：
// api/user.js
import axios from 'axios'
export default {
async login(credentials) {
return await axios.post('/api/login', credentials)
},
async getProfile() {
return await axios.get('/api/user/profile')
}
}路由权限控制
通过路由守卫实现基于用户状态的访问控制：
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth()
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})本地数据持久化
结合 localStorage 实现用户登录状态持久化：
// utils/auth.js
export const setAuth = (token) => {
localStorage.setItem('token', token)
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
}
export const clearAuth = () => {
localStorage.removeItem('token')
delete axios.defaults.headers.common['Authorization']
}响应式权限指令
创建自定义指令实现界面元素权限控制：
// directives/auth.js
Vue.directive('auth', {
inserted(el, binding) {
const hasPermission = checkPermission(binding.value)
if (!hasPermission) el.parentNode.removeChild(el)
}
})表单验证增强
使用 VeeValidate 进行专业级表单验证：
<ValidationObserver v-slot="{ handleSubmit }">
<form @submit.prevent="handleSubmit(submit)">
<ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
<input v-model="email">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</form>
</ValidationObserver>组件化用户卡片
创建可复用的用户信息展示组件：
<template>
<div class="user-card">
<img :src="user.avatar" alt="头像">
<h3>{{ user.name }}</h3>
<p>{{ user.bio }}</p>
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true
}
}
}
</script>
