vue3实现登录注册功能
时间: 2023-06-20 13:08:38 浏览: 51
Vue3是Vue.js的最新版本,它的设计理念是更加模块化和易于开发。实现登录注册功能需要使用Vue3及相关插件和库,以下是一个简单的示例代码:
1. 安装vue-router和vuex
```bash
npm install vue-router vuex --save
```
2. 创建路由(router)
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/components/Login.vue'
import Register from '@/components/Register.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
3. 创建Vuex store
```javascript
import { createStore } from 'vuex'
const store = createStore({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
}
},
actions: {
login({ commit }, user) {
// TODO: 实现登录逻辑
commit('setUser', user)
},
register({ commit }, user) {
// TODO: 实现注册逻辑
commit('setUser', user)
}
},
getters: {
isLoggedIn: state => !!state.user
}
})
export default store
```
4. 创建登录和注册组件
```vue
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="login">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
this.$store.dispatch('login', { username: this.username, password: this.password })
.then(() => {
this.$router.push('/')
})
}
}
}
</script>
```
```vue
<template>
<div>
<h1>Register</h1>
<form @submit.prevent="register">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<div>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" v-model="confirmPassword">
</div>
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
confirmPassword: ''
}
},
methods: {
register() {
this.$store.dispatch('register', { username: this.username, password: this.password })
.then(() => {
this.$router.push('/')
})
}
}
}
</script>
```
5. 在App.vue中使用路由和Vuex
```vue
<template>
<div>
<router-view></router-view>
<div v-if="$store.getters.isLoggedIn">
Logged in as {{ $store.state.user.username }}.
</div>
</div>
</template>
<script>
export default {
computed: {
isLoggedIn() {
return this.$store.getters.isLoggedIn
}
}
}
</script>
```
以上是一个简单的实现登录注册的示例代码,具体实现过程还需要根据具体需求进行修改和完善。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)