vue+vuex的应用笔记

头像
dada86
    阅读 8 分钟
    18

    应用截图

    图片描述

    功能描述

    填写邀请码注册获得优惠券
    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
};
    javascript
    dada86
    993 声望22 粉丝

    多努力一点点。

    « 上一篇
    ES6常用实例
    下一篇 »
    Egg.js学习

    引用和评论

    推荐阅读
    头像
    常用echarts图表

    dada86赞 11阅读 5.9k评论 2

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新