Vuex是什么?
Vuex是一个专为Vue.js应用程序开发的状态管理模式;它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
怎么使用?
1.安装vuex
按照官网给出的步骤 官网地址
npm install vuex --save //安装vuex
2.Vuex 依赖 Promise 浏览器支持promise的此步骤可省略
注意:Vuex 依赖 Promise (opens new window)。如果你支持的浏览器并没有实现 Promise (比如 IE),那么你可以使用一个 polyfill 的库,例如 es6-promise (opens new window)。
你可以通过 CDN 将其引入:
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>
然后 window.Promise 会自动可用。
如果你喜欢使用诸如 npm 或 Yarn 等包管理器,可以按照下列方式执行安装:
npm install es6-promise --save # npm
yarn add es6-promise # Yarn
或者更进一步,将下列代码添加到你使用 Vuex 之前的一个地方:
import 'es6-promise/auto'
3.在项目引用
找到项目中的main.js文件,将内容引入
import store from './store'
.use(store)
4.使用方法
首先,在项目中找到store文件夹,如果没有就自己建一个文件夹,在文件夹内再新建一个js文件。
import { createStore } from 'vuex'
export default createStore({
state: { //数据存放的位置
data:''
},
mutations: {//在mutations写方法更改state中的值
data(state,data){
state.data=data
}
},
actions: {//通过actions触发mutations的方法
dataone(context,data){
context.commit('data',data);//带引号的data是mutation里的,第二个data,是页面上
//传过来的参数
}
},
modules: {
}
})
然后,将要保存的数据从页面传过来
这是页面:
import {useStore} from 'vuex'
export default{
setup(){
let A =124
const store=useStore();
store.dispatch('dataone',A)
//括号内第一个参数为actions中的方法名,方法名不能与mutations中重复
//第二个为需要存储改变的值的变量
}
}
描述使用它实现登录功能的流程?
1、首先说说怎么获取input框的值
vue中提供了一个ref属性,这里需要在html代码中用ref属性来绑定这个input框,再通过js代码来获取input的值:
HTML代码:
|
1
|
<input type="text" v-model="test1" placeholder="请输入账号" maxlength="11" ref="input1" >
|
js代码:
|
1
|
this.test1 = this.$refs.input1.value;//获取input1的值,减少获取dom节点的消耗
|
2、如何利用vue实现登陆功能:
这里用到@click来绑定一个点击事件
html代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div>
<ul>
<li>
<div>
账号:
<input type="text" v-model="test1" placeholder="请输入账号" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " ref="input1" @blur="changeName(test1)"><br /> 密码:
<input type="password" v-model="test2" placeholder="请输入密码" ref="input2" @blur="changeName1(test2)"><br /> 验证码:
<input type="text" v-model="test3" placeholder="请填写验证码" ref="input3">
<button @click="getYzm">{{codeText}}</button><br />
</div>
</li>
</ul>
<div @click="loginBtn()">点击登录</div>
</div>
</template>
|
js代码:data用来存放数据,methods中存放上面定义的事件,如click事件。需要注意的是vue定义事件的写法。
this.$message('请输入验证码');//这个是element提供的一个消息提示,类似于layer.msg();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<script type="text/javascript">
export default {
data() {
return {
test1: '',
test2: '',
test3: '',
codeText: '获取验证码',
}
},
methods: {
//获取验证码
getYzm() {
let reg = /^1[0345789][0-9]{9}$/;
if(this.test1 == '' || this.test2 == "") {//验证当用户输入的手机号为空或者不正确时不能进行获取验证码
this.$message({
message: '手机号密码不能为空!',
type: 'warning'
});
} else if(!reg.test(this.test1)) {
this.$message.error("请输入正确的手机号");
} else {
this.timer();
console.log(this.test1);
}
},
timer() {//验证码倒计时
let num = 60;
let that = this;
that.codeText = num + "秒后重新发送";
let time = setInterval(function() {
if(num == 0) {
clearInterval(time);
time = null;
that.codeText = "重发验证码";
} else {
num--;
that.codeText = num + "秒后重新发送";
}
}, 1000);
},
//用户名的失去光标判断
changeName(userName) {
let name = userName;
if(name == '' || name == undefined || name == null) {
// 用户名为空时,input框获得焦点
this.$refs.input1.focus();
} else {
console.log(name);
}
},
//密码框失去光标判断
changeName1(pass) {
if(pass == '' || pass == undefined || pass == null) {
// 密码为空时,input框获得焦点
this.$refs.input2.focus();
} else {
console.log(pass);
}
},
loginBtn() {
//一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了
this.test1 = this.$refs.input1.value;//获取input1的值,减少获取dom节点的消耗
this.test2 = this.$refs.input2.value;
this.test3 = this.$refs.input3.value;
if(this.test3 == '') {
this.$message.error('请输入验证码');
} else {
this.$message({
message: '恭喜你,登陆成功!',
type: 'success'
});
console.log(this.test1);//打印出input框输入的值
console.log(this.test2);
console.log(this.test3);
}
},
}
}
</script>
|
vue安装element-ui
1.安装命令:cnpm install element-ui --save
2.在main.js中加入如下代码:
|
1
2
3
|
import ElementUi from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUi)
|
3. 输入命令:npm run dev 运行项目