嘗一嘗Vue全家桶

Vue.js 是當下很火的一個 JavaScript MVVM 庫，它以數據驅動和組件化的思想構建。不管你是 Angular 的忠實粉，還是 React 的迷戀者，有機會多了解一個框架也沒什么壞處，更何況 Vue 上手難度還是比較低的 。

本文將介紹 Vue 全家桶（Vue+Vue-router+Vuex）在項目中的使用。經過一個項目的開發，個人感覺相比于 React，Vue 給我最大的感受是簡單、易理解，不過這可能和我自身對 React 的掌握程度及本次開發的項目大小有關。

雙向數據綁定

Vue 內的雙向數據綁定使用還是比較簡單的 v-model 就可以解決問題。

但有一個問題需要注意，特別在編輯數據項的時候，雙向數據綁定可能引起靜態數據聯動的問題，這時候需要用到對象復制來解決問題。如：在彈層中編輯數據時，導致列表數據同步跟隨著變化。

Vue-router

這里直接使用懶加載路由，如果要測試非懶加載可以移出來預先 require；

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/', component: resolve => require(['./components'], resolve)},
        {path: '/refresh', component: resolve => require(['./components'], resolve)},
        {path: '/forbid', component: resolve => require(['./components/forbid'], resolve)}
    ]
});

//store
import store from './store/index';
new Vue({
    store,
    router
}).$mount('#container');

Vuex

Vuex 允許我們將 store 分割到 module 。每個模塊擁有自己的 state、getters、actions、mutations。

notice.js 部分代碼

const state = {
    currentNoticeType: noticeType.update.val,
    noticeList: []
};

const getters = {
    noticeList: state => {
        return state.noticeList;
    },
};

const actions = {
    getNoticeList(context, type){
        ajax.post('/notice/getList', {type: type}, (data) => {
            if (data) {
                setTimeout(function () {
                    context.commit('getNoticeList', data);
                }, 100);
            }
        });
    },
    removeNotice(context, id){
        return new Promise((resolve) => {
            ajax.post('/notice/remove', {id: id}, (data) => {
                resolve(data);
                if (data) {
                    context.commit('removeNotice', id);
                }
            });
        });
    },
};

const mutations = {
    getNoticeList(state, data){
        state.noticeList = data;
    },
    removeNotice(state, id){
        var noticeList = state.noticeList.filter(function (noticeItem) {
            return noticeItem.id != id;
        });
        state.noticeList = noticeList;
    }
};

export default {
    state,
    getters,
    actions,
    mutations
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import notice from './modules/notice'
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        notice
    }
})

getters：用來從 store 獲取 Vue 組件數據；

mutations：更改 store 中的狀態的唯一方式；

actions：可以包含任意異步操作， 提交 mutation，而不是直接變更狀態；

注意：

store 的狀態修改只能顯式地提交 mutation 觸發；

action 內可以完成服務端接口調用，可以通過 commit 觸發 mutation 修改 store 狀態，也可以通過 dispatch 觸發其它 action，如：

context.dispatch('getNoticeList', context.state.currentNoticeType);

Vue 文件內調用方式如下：

computed: {
    ...mapGetters([
        'currentNoticeType', // 獲取 state 中的 currentNoticeType
    ])
},
methods: {
    closePreview: function () {
        this.$store.commit('closePreviewNotice'); // 如果不需要調用服務端接口，可以直接通過 commit 調用 mutation
    },
    deleteNotice() {
        this.$store.dispatch('removeNotice', this.noticeItem.id).then((success) => {

        });
    },
}

Element UI

在開發項目的時候，難免會用到組件，關于是否自己造輪子的問題大家都有不同的看法，這些都是需求看情況而定，肯定不能因為現有開源組件不支持反而一味閹割需求。Element UI給我們提供了豐富的組件，只有引入一下CDN文件或者npm安裝，同時也可以按需引入，避免資源文件過大，官方文檔都有說明 快速上手 。我在 mian.js 加入以下代碼：

import 'element-ui/lib/theme-default/icon.css';
import 'element-ui/lib/theme-default/message.css';
import 'element-ui/lib/theme-default/message-box.css';
import 'element-ui/lib/theme-default/date-picker.css';
import {Message, MessageBox, DatePicker} from 'element-ui';
Vue.use(DatePicker);
Vue.prototype.$message = Message;
Vue.prototype.$messageBox = MessageBox;

附上出自無敵設計師的效果圖一張：

 

來自：http://beckjin.com/2017/09/17/vue-family/