Vue项目实战：登录页面实现与Vuex集成

最新推荐文章于 2023-07-26 09:59:08 发布

林夏天

最新推荐文章于 2023-07-26 09:59:08 发布

阅读量795

点赞数 2

分类专栏： Vue.js项目实战:从零独立开发企业级电商系统文章标签： vue javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46124214/article/details/105225666

版权

本文详细介绍了如何在Vue项目中实现登录功能和集成Vuex进行状态管理。首先，讲解了登录页面的实现，包括登录功能和拉取用户信息的步骤。接着，介绍了Vuex的框架搭建，包括在src/store下创建action.js、index.js、mutations.js文件，并展示了相关代码。针对Vuex页面数据延迟的问题，提出了使用计算属性的解决方案，确保数据及时更新。

摘要由CSDN通过智能技术生成

登录页面

（1）登录功能

<template>
	<div class="login-form">
          <h3>
            <span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入帐号" v-model="username">
          </div>
          <div class="input">
            <input type="password" placeholder="请输入密码" v-model="password">
          </div>
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <div class="sms"