vue 添加埋点，记录访问次数，数据请求情况

首先要store创建状态

store.js  文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//创建VueX对象
const state = {
	routerName:'',  // 当前路由
    routerUrl:'',  // 当前url
    asyncMethods:[],  // 页面访问的数据接口
    startTime:new Date().getTime()  // 开始进入页面时间
}

const actions = {
	notifyBackend (store,newRouter) {
        const { commit, state } = store;
        let param = {
            'routerName':newRouter.routerName,  // 页面名
            'routerUrl':newRouter.routerUrl,  // 页面url
            'asyncMethods':state.asyncMethods,  // 页面访问数据集合
            'time':new Date().getTime()-state.startTime, // 页面访问时间
        }
        console.log('======================',param)
        // axios.post(url,param).then(res => {

        // })
        commit('reset',newRouter);  // 初始化数据
    },
    addAsyncMethods(context,method){
        context.commit('addAsyncMethods',method);  // 每请求一次数据  异步向集合添加一次 
    }
}
const mutations = {
	updataState(state, data){  // 公共更新state  状态方法
        for (let key in data) {
            state[key] = data[key]
        }
    },
    addAsyncMethods (state, method={}) {  // 更改数据请求集合
        state.asyncMethods.push(method);
    },
    reset(state,newRouter){  // 初始化
        state.routerName=newRouter.routerName;
        state.routerUrl=newRouter.routerUrl;
        state.asyncMethods=[];
        state.startTime=new Date().getTime()
    }
}
const store = new Vuex.Store({
    state,
    actions,
    mutations
})
export default store

在store里创建完初始状态之后，就要在main.js里执行方法，根据全局路由守卫判断页面的进入离开 执行方法

import store from './store'
import router from './router'
// 创建全局路由守卫  监听进入之前   通过判断进入之前 from 的路由名 向后端发送请求 
router.afterEach((to,from) => {
	if(from.name){  // 判断是否为初始页面 如果为初始页面不需要发送
	    let toRouter = {  // 记录上一个页面名
	        'routerName':from.meta.title,
	        'routerUrl':from.name
	    }
	    store.dispatch('notifyBackend',toRouter)
    }
})
// 创建全局守卫  监听进入之后  
router.beforeEach((to,from,next) => {
	let toRouter = {  //  记录当前页面路由
	    'routerName':to.meta.title,
	    'routerUrl':to.name
    }
	store.commit('updataState',toRouter)
	// 下面是一些登录限制
	....
	next()
})

main.js 创建完监听页面的变更之后 就要在数据请求方记录请求记录
在请求配置文件里 axiosConfig.js 文件

import Axios from 'axios'
import router from '../router/index'
import store from '../store/index'

let startTime = ''
let endTime = ''
let action = ''

// 请求拦截器
Axios.interceptors.request.use(config => {

    // 发送请求之前可以在这里写一些东西
    startTime = new Date().getTime()
    action = config.url
    return config;
}, error => {

    // 请求报错的时候做一些事情
    return Promise.reject(error)
})

// 响应拦截器
Axios.interceptors.response.use(response => {
    // 对响应数据做一些事情
    endTime = new Date().getTime()
    if(response){
        store.dispatch('addAsyncMethods',{  // 如果响应成功  记录当前请求
            actionName:action,  // 请求路径
            fail:response.status,  // 请求代码  成功200  失败记录失败代码
            errMsg:response.statusText,  //  请求错误信息  
            time:endTime-startTime  //  请求时间
        });
    }
    return response.data
}, error => {
	// 请求错误时做些事
    let status = ''
    if(error.request){
        status = error.request
    }else if(error.response){
        status = error.response
    }
    
    if (status) {
        switch (status.status) {
            case 400: error.message = '请求错误(400)'; 
                break;
            case 401: error.message = '未授权，请重新登录(401)';
                      router.push('/401')
                break;
            case 403: error.message = '拒绝访问(403)';
                break;
            case 404: error.message = '请求出错(404)'; 
                      router.push('/404')
                break;
            case 408: error.message = '请求超时(408)'; 
                break;
            case 500: error.message = '服务器错误(500)'; 
                      router.push('/500')
                break;
            case 501: error.message = '服务未实现(501)'; 
                break;
            case 502: error.message = '网络错误(502)'; 
                break;
            case 503: error.message = '服务不可用(503)'; 
                break;
            case 504: error.message = '网络超时(504)'; 
                break;
            case 505: error.message = 'HTTP版本不受支持(505)';
                break;
            default: error.message = `连接出错(${error.response.status})!`;
        }
    }else{
        error.message ='连接服务器失败!'
    }
    store.dispatch('addAsyncMethods',{
        actionName:action,
        fail:1,  // 请求代码  成功200  失败记录失败代码
        errMsg:error.message,  //  请求错误信息  
        time:endTime-startTime  //  请求时间
    })
    return Promise.reject(error)
})
export default Axios

到这里功能就实现了