在Vue中如何不影响业务代码的情况下实现页面埋点

export default {
    state: {
        templates: "1",
        // 交互日志
        log: {
            info: "demo",
            actionData: []
        },
    },
    getters: {
        templates(state) {
            return state.templates;
        },
        log(state) {
            return state.log
        }
    },
    mutations: {
        templatesMu(state, val) {
            if (val) {
                state.templates = val;// 改变vuex中的templates为设置的皮肤
            }
        },
        logMu(state, val) {
            if(val) {
                 state.log.actionData.push(val);
            }
        }
    },
    actions: {

    }
}

// 数据直接请求
export const apiData = (config)=>{
    // 用户操作之后将操作的信息存进actionData
    store.commit("logMu", {url: config.url, time: new Date().getTime()})
    config.url = '/zuul'+ config.url
    config = checkConfig(config)
    return axios.request(config)
}

// 路由跳转之后
router.afterEach((to, from) => {
    end = new Date().getTime();
    let logData = window.vm.$store.getters.log;
    logData['from'] = from.name;
    logData['to'] = to.name;
    logData['start'] = start;
    logData['end'] = end;
    logData['url'] = "url";

    logServer(logData);
    start = new Date().getTime();
    window.scrollTo(0, 0);
})

<template>
    <div id="app" @click="clickme">
        <router-view/>
    </div>
</template>