vue进阶

以下是自己在vue项目的开发与学习过程中，逐渐学会并使用的一些知识点，希望对刚入门vue的前端小伙伴们有一些帮助

———————————————————————分割线———————————————————————-

1.vue-router

在学会用router进行路由跳转后，那么应该知道如何通过路由守卫来进行跳转前的某些函数的执行，最常见的例子就是进行权限判断：

router.beforeEach((to, from, next) => {
    if(to.meta.requiresAuth) {
        let userInfo = window.localStorage.getItem('userId');
        if(!userInfo) {
            next({
                name: 'login',
                query: {
                    redirect: to.fullPath
                }
            })
        } else {
            //判断是否有token
            next();
        }

    } else {
        next();
    }
})

首先判断是否需要路由守卫，如果不需要，那么执行跳转，否则 验证登录信息;

vue-router 中的meta对象可配置许多属性用于权限判定，缓存判定等

2.vue-axios

axios可配置全局参数，包括 请求超时，请求头信息等

axios.defaults.timeout = 30000*10
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true   //用于获取响应头信息,只有在非跨域状态下才会返回，否则返回默认表头信息

axios 可配置请求拦截器，响应拦截器，常用于配置交互信息，比如loading，message提醒等。

axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    loading = Loading.service({
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    return config;
}, function(error) {
    Message({
        type:'info',
        message:'发送请求超时,请刷新页面'
    })
    loading.close();
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    loading.close();
    if(response.data.code!==0){
        Message({
            type:'info',
            message:response.data.msg
        })
    }
    return response;
}, function(error) {
        Message({
            type:'info',
            message:'服务器内部错误,请联系管理员'
        })
        loading.close();
    // 对响应错误做点什么
    Message({
        type:'info',
        message:'服务器内部错误,请联系管理员'
    })
    loading.close();
    return Promise.reject(error);
});

3.vue-vuex

对多模块的单页面vue项目而言，过多的数据会导致vuex文件过于庞大，因此可以通过modules对vuex文件进行切割

//  store/index.js
import auth from 'auth/store/index' //授权模块vuex
import client from 'client/store/index' //客户端管理模块vux
import system from 'system/store/index' //系统管理模块vuex
import message from 'message/store/index'   //消息管理模块vuex

const store = new Vuex.Store({
    mutations:{
        loginIn(state, options) {
            axios.post(`${httpUrl}/login`, qs.stringify({
                userName: options.form.username,
                password: SHA256(options.form.pwd)
            })).then((data) => {
                options.callback(data);
            })
        }
    },
    //引入模块vuex
    modules:{
        auth:auth, //权限管理
        client:client,  //client系统管理
        system: system, //sys系统管理
        message:message,//消息管理
    }
})

export default store;

// 各模块的vuex
export default {
    namespaced:true,  //定于查找域
    state：{}，
    getters:{},
    mutations:{
        getData(state){},
        updateData(state){
            //如果需要使用store.commit('client/getData');记得要import store from 'vuex'； 
        }
    },
    actions:{}
}

//各模块下的.vue文件
//例如client模块下的.vue文件,需要通过mapState来映射数据:
...mapState('client', ['data1','data2','data3']),
//同理 映射函数
...mapMutations('client',['function1','function2'])

写在vuex里面的函数是没办法调用this的，比如我的数据请求都是放在vuex里面执行的，但是需要对返回状态进行判定然后把msg给提示出来，这里的话，我们可以通过定义callback回调函数进行操作

4.vue-mixins

mixins可以在不影响当前文件代码的情况下，对该模块的vue进行配置新的data对象，methods执行函数等

//需要添加mixins的文件
import {Account} from '@/test/js/index'
export default{
    mixins:[Account],
    data(){
        return {
            data:'test'
        }
    },
    methods:{
        testFun(){
        }
    }
}

// 将要导入的mixins文件
export const Account = {
    data:{
    return{
        }
    },
    methods:{
    }
}

---