vue+vuex的应用笔记

Loong_T 发布于2019-08-23 11:47 / 1808人阅读

摘要：异步竞态怎么处理那是用户自己的事情。真正限制你的只有必须是同步的这一点使用常量替代事件类型服务器请求错误

应用截图

功能描述

填写邀请码注册获得优惠券
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

registerForm.vue

知识点：
elementui表单及验证
vuex的mapState
store的运用

stepsBar.vue

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
};

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97473.html

用 Vuex 构建一个笔记应用

摘要：如果不熟悉，在这个教程里面，我们会通过构建一个笔记应用来学习怎么用。这个是我们要构建的笔记应用的截图你可以从下载源码，这里是的地址。每当用户点击笔记列表中的某一条时，组件会调用来分发这个会把当前选中的笔记设为。原文：Learn Vuex by Building a Notes App，有删改。本文假设读者熟悉 Vuex 文档的内容。如果不熟悉，you definitely sho...

gggggggbong 2019-08-19 18:12 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

tomorrowwu 2019-08-19 18:42 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

cnsworder 2019-08-01 15:25 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

levius 2019-08-29 10:58 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

UsherChen 2019-08-19 18:43 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

YJNldm 2019-08-01 15:24 评论0 收藏0