vue+vuex的應用筆記

Loong_T 發布于2019-08-23 11:47 / 1653人閱讀

摘要：異步競態怎么處理那是用戶自己的事情。真正限制你的只有必須是同步的這一點使用常量替代事件類型服務器請求錯誤

應用截圖

功能描述

填寫邀請碼注冊獲得優惠券
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
};

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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