vue+vuex的應(yīng)用筆記

Loong_T 發(fā)布于2019-08-23 11:47 / 1720人閱讀

摘要：異步競(jìng)態(tài)怎么處理那是用戶自己的事情。真正限制你的只有必須是同步的這一點(diǎn)使用常量替代事件類(lèi)型服務(wù)器請(qǐng)求錯(cuò)誤

應(yīng)用截圖

功能描述

填寫(xiě)邀請(qǐng)碼注冊(cè)獲得優(yōu)惠券
1、填寫(xiě)邀請(qǐng)碼
2、填寫(xiě)聯(lián)系方式
3、填寫(xiě)賬號(hào)信息
4、完成注冊(cè)
2和3需要必填驗(yàn)證

具體代碼 index.js

知識(shí)點(diǎn):
加載vue、elementUi
輸出app、store
ES6模塊主要有兩個(gè)功能：export和import
export 用于對(duì)外輸出本模塊（一個(gè)文件可以理解為一個(gè)模塊）變量的接口

var name = "lily";
var age = 19
export {
    name,
    age
}

import 用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊。
也就是說(shuō)使用export命令定義了模塊的對(duì)外接口以后，其他JS文件就可以通過(guò)import命令加載這個(gè)模塊（文件）

import {component1, component2} 按需引入，經(jīng)過(guò)打包壓縮后文件體積更小

export與export default的區(qū)別
1、在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
2、通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，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

知識(shí)點(diǎn)：組件components

registerForm.vue

知識(shí)點(diǎn)：
elementui表單及驗(yàn)證
vuex的mapState
store的運(yùn)用

stepsBar.vue

store.js

知識(shí)點(diǎn)：
store拆分即多模塊狀態(tài)管理(modules)

//定義方法
export const NAMESPACE = "register";
export default {
    namespaced: true,
    state,
    mutations,
    actions
};
// 使用方法
import { mapState } from "vuex";
import { NAMESPACE, NEXT_STEP} from "./vuex";
//監(jiān)聽(tīng)響應(yīng)式屬性變化
computed:{
    ...mapState({
        active: state => state.register.stepsAction
    })
}
//觸發(fā)actions
this.$store.dispatch(`${NAMESPACE}/registerSave`, data); 
//觸發(fā)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

知識(shí)點(diǎn)：
對(duì)象的解構(gòu)賦值

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中引入各個(gè)模塊，為了解決不同模塊命名沖突的問(wèn)題，將不同模塊的namespaced:true，之后在不同頁(yè)面中引入getter、actions、mutations時(shí)，需要加上所屬的模塊名
mutations和actions的區(qū)別
Vuex中store數(shù)據(jù)改變的唯一方法就是mutation
actions 只是一個(gè)架構(gòu)性的概念，并不是必須的，說(shuō)到底只是一個(gè)函數(shù)，你在里面想干嘛都可以，只要最后觸發(fā) mutation 就行。異步競(jìng)態(tài)怎么處理那是用戶自己的事情。vuex 真正限制你的只有 mutation 必須是同步的這一點(diǎn)使用常量替代 Mutation 事件類(lèi)型

//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: "服務(wù)器請(qǐng)求錯(cuò)誤" });
        });
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};