vuejs业务页面的发布订阅代码设计

平时用vuejs写业务页面时，发现经常会用到相同的逻辑去搭建页面，初始化数据、校验参数、子页面子路由的渲染等。所以在这里总结一下这种页面的初始化套路，方便后续创建页面或者优化逻辑。

设计原则

利用发布-订阅的模式去初始化子页面，父页面处理全局的相关操作。

• 父页面：校验参数、数据的合法性，并发网络请求，引导至全局的错误页面，最终触发initReady=true。
• 子页面：订阅initReady事件，成功后进行子页面初始化。

逻辑图

代码设计

1. vuex状态数据

// store.js

import global from './modules/global';
import cards from './modules/cards';

export default {
    namespaced: true,
    modules: {
        global,
        cards,
    },
};

// ./modules/global.js

/*
* 全局数据
*/
export default {
    // 命名空间隔离
    namespaced: true,
    state: {
        // 全局事件-初始化完成，子页面订阅此事件的变更
        initReady: false,
        // 全局错误码
        error: null,
        // 全局常量，不可更改
        constants: Object.freeze({
            test: 1,
        }),
    },
    mutations: {
        SET_INIT_READY(state, value) {
            state.initReady = value;
        },
        SET_ERROR(state, value) {
            state.error = value;
        },
    },
    actions: {
        setInitReady({ commit }, value) {
            commit('SET_INIT_READY', !!value);
        },
        setError({ commit }, value) {
            commit('SET_ERROR', value || null);
        },
    },
};

// ./modules/cards.js

/*
* 卡列表相关数据
*/
export default {
    // 命名空间隔离
    namespaced: true,
    state: {
        // 当前卡
        currentCard: {},
        // 卡列表
        cardsList: [],
    },
    mutations: {
        SET_CURRENT_CARD(state, value) {
            state.currentCard = value;
        },
        SET_CARDS_LIST(state, value) {
            state.cardsList = value;
        },
    },
    actions: {
        setCurrentCard({ commit }, value) {
            commit('SET_CURRENT_CARD', value || {});
        },
        setCardsList({ commit }, value) {
            commit('SET_CARDS_LIST', value || []);
        },
    },
};

2. vue router路由定义

// routes.js，subApp的路由定义

const index = () => import(/* webpackChunkName: "HcTplSubApp" */ './views/index.vue');
const home = () => import(/* webpackChunkName: "HcTplSubApp" */ './views/home.vue');

export default [
    {
        path: '/',
        component: index,
        meta: {
            title: '首页',
        },
        children: [
            {
                path: '', // 首页
                name: 'RouteHome', // 使用路由名字进行跳转，有助于代码易读性
                component: home,
                meta: {
                    title: '首页',
                    keepAlive: true,
                },
            },
        ],
    },
];

3. index父页面

4. home子页面