vue：如何设计网页登录功能（涉及登录状态的切换、toast组件设计弹框）

---

一、前言

上一篇文章介绍了如何实现短信验证码倒计时、实现手机登录并储存token的功能。这一篇文章将会介绍有关登录状态的切换、toast组件设计弹框的内容。

---

二、登陆状态的切换

在本项目中，我们想先实现用户登录后，“登录”按钮则显示为“购物车”按钮，为后期的数据渲染做准备。为此，我们设计了函数chanIsLogined()，步骤如下：

1.注册LoginStatus组件

显然，chanIsLogined()应该是一个全局功能，因此在store下新建LoginStatus文件夹，在其下新建index.js，具体代码如下：

export default {
   
  namespaced: true,
  state: {
   
    isLogined: false
  },
  getters: {
   
  },
  mutations: {
   
    chanIsLogined(state, payload) {
   
      state.isLogined = payload
    }
  },
  actions: {
   
  },
  modules: {
   
  }
}

2.在全局index.js文件中进行引入

import LoginStatus from './LoginStatus'

3.在Login.vue中引入并解构

import {
    mapMutations } from 'vuex'
...
...mapMutations({
   
      chanIsLogined:"LoginStatus/chanIsLogined"
    })

之后就可以在该页面调用函数使用了。

this.chanIsLogined(true);

三、toast组件设计弹框

之前的弹框都是通过alert()简单实现的，现在我们用toast封装组件样式并进行调用。

1.新建Toast.vue书写组件及其样式

<template>
  <div class="toast">
    <i class="iconfont icon-toast_chenggong"