Vue入门笔记

什么是vuex？

Vuex是一个专为vue.js应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题。因为它采用的是集中式存储管理应用的所有组件状态，所以组件就可以和store通讯了。其实Vuex就是用来管理组件之间通信的一个插件

怎么向后端发出请求？（以登陆为例）

utils/request.js:

import axios from 'axios' //引入 axios
// 创建 axios 实例
const service = axios.create({
    baseURL: "http://localhost:8088/", // api 的 base_url
    timeout: 15000, // 请求超时时间
})
export default service

api/login.js:

import request from '@/utils/request' //引入封装好的 axios 请求

export function login(username, password) { //登录接口
    return request({ //使用封装好的 axios 进行网络请求
        url: '/admin/login',
        method: 'post',
        data: { //提交的数据
            username,
            password
        }
    })
}

然后是store/modules/user.js:

import { login } from '@/api/login'//引入登录 api 接口

const user = {
    actions: {
        // 登录
        Login({ commit }, userInfo) { //定义 Login 方法，在组件中使用 this.$store.dispatch("Login") 调用
            const username = userInfo.username.trim()
            return new Promise((resolve, reject) => { //封装一个 Promise
                login(username, userInfo.password).then(response => { //使用 login 接口进行网络请求
                    commit('') //提交一个 mutation，通知状态改变
                    resolve(response) //将结果封装进 Promise
                }).catch(error => {
                    reject(error)
                })
            })
        },
    }
}
export default user

如何配置路由路径？

router.js:

import Vue from 'vue' //引入 Vue
import VueRouter from 'vue-router' //引入 Vue 路由

Vue.use(VueRouter); //安装插件

export const constantRouterMap = [
    //配置默认的路径，默认显示登录页
    { path: '/', component: () => import('@/views/login')},

    //配置登录成功页面，使用时需要使用 path 路径来实现跳转
    { path: '/success', component: () => import('@/views/success')},

    //配置登录失败页面，使用时需要使用 path 路径来实现跳转
    { path: '/error', component: () => import('@/views/error'), hidden: true }
]

export default new VueRouter({
    // mode: 'history', //后端支持可开
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap //指定路由列表
})

怎么显示和隐藏密码？

<span slot="suffix" @click="showPwd">
              <svg-icon icon-class="eye" class="color-main"></svg-icon>
            </span>

showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    }

实现登陆跳转

<el-form-item prop="password">
          <el-input
              name="password"
              :type="pwdType"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.password"
              autocomplete="on"
              placeholder="请输入密码"
          >
            <span slot="prefix">
              <svg-icon icon-class="password" class="color-main"></svg-icon>
            </span>
            <span slot="suffix" @click="showPwd">
              <svg-icon icon-class="eye" class="color-main"></svg-icon>
            </span>
          </el-input>
        </el-form-item>

在密码框区域，@keyup.enter.native="handleLogin"意思是监听键盘的回车键，

<el-form-item style="margin-bottom: 60px">
          <el-button
              style="width: 100%"
              type="primary"
              :loading="loading"
              @click.native.prevent="handleLogin"
          >登录</el-button>
        </el-form-item>

这是登陆的按钮@click.native.prevent="handleLogin"绑定点击事件
最后再看看handleLogin方法：

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("Login", this.loginForm)
              .then(response => {
                this.loading = false;
                let code = response.data.code;
                if (code == 200) {
                  this.$router.push({
                    path: "/success",
                    query: { data: response.data.data }
                  });
                } else {
                  this.$router.push({
                    path: "/error",
                    query: { message: response.data.message }
                  });
                }
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    }

ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素
validate则是对表单校验，参数valid为true则前端校验合法，