vue3实现登录注册功能

要实现登录注册功能，需要使用Vue3中的组件、路由、状态管理等特性。

首先，你需要创建一个Vue3项目，在命令行中输入以下命令：

vue create my-project

然后，安装需要的依赖：

npm install vue-router vuex axios

接下来，你需要创建一个路由器，用来管理不同页面的路由。在`src`目录下创建一个`router`文件夹，在其中创建一个`index.js`文件，然后添加以下内容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这里我们定义了三个路由：首页、登录和注册。

接下来，我们需要在`src`目录下创建一个`store`文件夹，在其中创建一个`index.js`文件，用来管理应用的状态。在`index.js`文件中添加以下内容：

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, { username, password }) {
      // 发送登录请求
      const response = await axios.post('/api/login', { username, password })

      if (response.data.success) {
        // 登录成功，将用户信息保存到状态中
        commit('setUser', response.data.user)
      }

      return response.data
    },
    async register({ commit }, { username, password }) {
      // 发送注册请求
      const response = await axios.post('/api/register', { username, password })

      if (response.data.success) {
        // 注册成功，将用户信息保存到状态中
        commit('setUser', response.data.user)
      }

      return response.data
    }
  }
})

这里我们定义了一个`user`状态和两个操作：登录和注册。在登录和注册操作中，我们使用`axios`发送请求并将响应保存到状态中。

最后，我们需要创建三个视图组件：首页、登录和注册。在`src/views`目录下创建一个`Home.vue`文件，一个`Login.vue`文件和一个`Register.vue`文件，然后分别添加以下内容：

`Home.vue`

<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <p v-if="user">你好，{{ user.username }}！</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user
    }
  }
}
</script>

`Login.vue`

<template>
  <div>
    <h1>登录</h1>

    <form @submit.prevent="login">
      <div>
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username">
      </div>

      <div>
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password">
      </div>

      <div>
        <button type="submit">登录</button>
      </div>
    </form>

    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async login() {
      const response = await this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      })

      if (!response.success) {
        this.error = response.message
      } else {
        // 登录成功，跳转到首页
        this.$router.push('/')
      }
    }
  }
}
</script>

`Register.vue`

<template>
  <div>
    <h1>注册</h1>

    <form @submit.prevent="register">
      <div>
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username">
      </div>

      <div>
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password">
      </div>

      <div>
        <button type="submit">注册</button>
      </div>
    </form>

    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async register() {
      const response = await this.$store.dispatch('register', {
        username: this.username,
        password: this.password
      })

      if (!response.success) {
        this.error = response.message
      } else {
        // 注册成功，跳转到首页
        this.$router.push('/')
      }
    }
  }
}
</script>

这样，你就完成了登录注册功能的实现。启动应用，即可在浏览器中访问登录和注册页面。