vue+vuex的应用笔记
应用截图
功能描述
填写邀请码注册获得优惠券
1、填写邀请码
2、填写联系方式
3、填写账号信息
4、完成注册
2和3需要必填验证
具体代码
index.js
知识点:
加载vue、elementUi
输出app、store
ES6模块主要有两个功能:export和import
export 用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
var name = 'lily';
var age = 19
export {name,age
}
import 用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)
import {component1, component2} 按需引入,经过打包压缩后文件体积更小
export与export default的区别
1、在一个文件或模块中,export、import可以有多个,export default仅有一个
2、通过export方式导出,在导入时要加{ },export default则不需要
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';import App from './app.vue';
import store from './store';Vue.use(ElementUI);export {App,store
};
app.vue
知识点:组件components
<template><div class="register-page"><steps-bar/><register-form/></div>
</template><script>import StepsBar from "./stepsBar.vue";import RegisterForm from "./registerForm.vue";export default {components: {'steps-bar': StepsBar,'register-form': RegisterForm,}};</script><style lang="scss">html{min-width:auto;font-size: 100%;}.register-page{padding:20px;}</style>
registerForm.vue
知识点:
elementui表单及验证
vuex的mapState
store的运用
<template>
<div class="register-box"><el-form ref="registerForm" :rules="registerFormRules" :model="registerForm" label-width="110px"><div class="step0" v-if="active == 0"><el-form-item label="邀请码:" prop = "code"><el-input v-model="registerForm.code"></el-input></el-form-item></div><div class="step1" v-if="active == 1"><el-form-item label="手机号:" prop="tel"><el-input v-model="registerForm.tel"></el-input></el-form-item><el-form-item label="短信验证码:" prop="smsCode"><el-input v-model="registerForm.smsCode" class="smsCodeInput"></el-input><el-button @click.prevent="getSmsCode()">获取验证码</el-button></el-form-item></div><div class="step3" v-if="active == 2"><el-form-item label="企业名称:" prop="ent"><el-input v-model="registerForm.ent"></el-input></el-form-item><el-form-item label="姓名:" prop="name"><el-input v-model="registerForm.name"></el-input></el-form-item><el-form-item label="密码:" prop="password"><el-input type="password" v-model="registerForm.password"></el-input></el-form-item></div><div class="step4 register-success" v-if="active == 3"><i class="el-icon-circle-check" style="font-size: 32px;"></i><p>注册成功</p></div></el-form><div class="next-box" v-if="active<3"><el-button type="primary" @click="next" v-loading="registerLoading">下一步</el-button></div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import { NAMESPACE, NEXT_STEP} from './vuex';export default {data(){return {registerForm: {code: 'sdada121212121',tel: '',smsCode: '',ent: '',name: '',password:''},registerFormRules: {tel:[{ required: true, message: '请输入手机号码', trigger: 'blur' },{ min: 11, max: 11, message: '请输入正确的11位手机号码', trigger: 'blur' }],smsCode:[{ required: true, message: '请输入短信验证码', trigger: 'blur' },],ent:[{ required: true, message: '请输入企业名称', trigger: 'blur' },],name:[{ required: true, message: '请输入姓名', trigger: 'blur' },],password:[{ required: true, message: '请输入密码', trigger: 'blur' },],}}},computed:{...mapState({active: state => state.register.stepsAction,registerLoading: state => state.register.registerLoading})},methods: {validate(callback) {this.$refs['registerForm'].validate((valid) => {if (valid) {callback && callback(this.registerForm);} else {console.log('error submit!!');return false;}});},next() {this.validate((data)=>{if (this.active === 2) { // 提交注册console.log(data);this.$store.dispatch(`${NAMESPACE}/registerSave`, data);} else {this.$store.commit(`${NAMESPACE}/${NEXT_STEP}`, 1);}});}}};
</script><style lang="scss" scoped>.register-box{margin:60px 20px;}.register-success{font-size: 32px;display:flex;justify-content: center;align-items: center;}.next-box{display:flex;justify-content:center;align-items:center;margin:60px 0 10px;}.smsCodeInput{width: calc(100% - 118px);}
</style>
stepsBar.vue
<template><el-steps :active="active" align-center><el-step title="邀请码"></el-step><el-step title="联系方式"></el-step><el-step title="账号信息"></el-step><el-step title="完成注册"></el-step></el-steps>
</template><script>import {mapState} from 'vuex';export default {computed:{...mapState({active: state => state.register.stepsAction})}};
</script>
store.js
知识点:
store拆分即多模块状态管理(modules)
//定义方法
export const NAMESPACE = 'register';
export default {namespaced: true,state,mutations,actions
};
// 使用方法
import { mapState } from 'vuex';
import { NAMESPACE, NEXT_STEP} from './vuex';
//监听响应式属性变化
computed:{...mapState({active: state => state.register.stepsAction})
}
//触发actions
this.$store.dispatch(`${NAMESPACE}/registerSave`, data);
//触发mutations
this.$store.commit(`${NAMESPACE}/${NEXT_STEP}`, 1);//store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);import register from './vuex.js';
const store = new Vuex.Store({modules:{register}
});export default store;
vuex.js
知识点:
对象的解构赋值
const node = {loc: {start: {line: 1,column: 5}}
};let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
vuex NAMESPACE:
vuex中的store分模块管理,需要在store的index.js中引入各个模块,为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名
mutations和actions的区别
Vuex中store数据改变的唯一方法就是mutation
actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。vuex 真正限制你的只有 mutation 必须是同步的这一点使用常量替代 Mutation 事件类型
//vuex.js
import { Message } from 'element-ui';import api from '@/api';
const { website: { register: { register: { registerHandle } } } } = api;export const NAMESPACE = 'register';export const NEXT_STEP = 'NEXT_STEP';
export const SUBMIT_LOADING = 'SUBMIT_LOADING';
export const SUBMIT_SUCCESS = 'SUBMIT_SUCCESS';
export const SUBMIT_ERROR = 'SUBMIT_ERROR';const state = {stepsAction: 0,registerLoading: false
};const mutations = {[NEXT_STEP](state, n) {state.stepsAction = state.stepsAction + n;},[SUBMIT_LOADING](state) {state.registerLoading = true;},[SUBMIT_SUCCESS](state) {state.registerLoading = false;state.stepsAction = state.stepsAction + 1;},[SUBMIT_ERROR](state, res) {state.registerLoading = false;Message.error(res.msg);}
};const actions = {registerSave({ commit, state }, data) {commit(SUBMIT_LOADING);registerHandle(data).then((response) => {if (response.status === 200) {const responseData = response.data;const result = responseData.result;if (responseData.status === 200) {commit(SUBMIT_SUCCESS, result);} else {commit(SUBMIT_ERROR, {msg: responseData.msg});}}}).catch(() => {commit(SUBMIT_ERROR, { msg: '服务器请求错误' });});}
};export default {namespaced: true,state,mutations,actions
};
vue+vuex的应用笔记相关推荐
- Vue学习(vuex)-学习笔记
文章目录 Vue学习(vuex)-学习笔记 含义理解 具体代码 辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记 含义理解 State Vuex 使用单一状态树- ...
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据 在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
- Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
- 唐金州的Vue开发实战学习笔记(生态篇)
Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
- 基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
- vue vuex vue-router后台项目——权限路由(超详细简单版)
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 bl ...
- Vue 学习 第六天学习笔记
Vue 学习 第六天学习笔记 1.webpack 使用复习 第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...
- 记录一下使用vue/vuex+SSR框架遇到的bug
项目框架:vue+vuex+vue-server-render 问题描述:页面中有个区块通过state.jkyl (JSON Object)来控制是否需要显示,页面未登录前jkyl的数据是为空的,待登 ...
- Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...
- Vue -- 指令【学习笔记】(持续更新)
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
最新文章
- JAVA面试题(2)
- 实现接口Controller定义控制器
- 用Tableau制作滚动时间轴(上)
- MySQL使用GROUP_CONCAT分组拼接
- flyway命令行使用示例:指定conf配置文件
- PAT (Basic Level) Practice (中文)1008 数组元素循环右移问题 (20 分)
- 联发科Helio P35处理器曝光:10GB运存
- 代码雨代码源复制_小程序基于Parser添加长按复制、代码高亮等功能
- 玩转mini2440开发板之【tekkamanninja版的u-boot的编译和烧录】
- 每日三道前端面试题--vue 第一弹
- 再见了,mover。当打之年,感恩相遇,感恩联汇,感恩一切。
- 微软工程师主讲的SqlServer2005视频教程
- 【短时能量】基于matlab语音信号短时能量【含Matlab源码 1719期】
- C#用NPOI控件把MySQL数据库中查询符合条件的数据导出到EXCEL
- 双线性插值实现图像放大算法 matlab,FPGA/verilog实现双线性插值图像放大
- html_09网页超链接
- 搜索基础 --算法竞赛专题解析(6)
- [数据结构]递归树:借助树求解递归算法的时间复杂度
- Stable Fluids / Real-Time Fluid Dynamics for Games 笔记
- java模拟数据库压测_java模拟数据库缓存