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

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

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

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

逻辑图
【vuejs业务页面的发布订阅代码设计】

文章图片

代码设计
1. vuex状态数据

// store.jsimport 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父页面