Vue博客前端总结——Vue全家桶

个人博客地址https://gitee.com/baymaxsjj

前言

经过前面一系列的配置，也可以开始对项目部分开始编写。其中会Vue 全家桶 Vue Router 及 Vuex 进行部分总结，还会对axios 进行封装，对错误进行统一的拦截。这些插件是对路由管理，数据交流，网络交互各个功能的实现，在项目中使用频繁，对其熟悉基本的使用方法，能够大大的提高效率。

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

简单配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const NewHome = () =>
    import ('./../views/NewHome.vue')
const name = "云墨白的博客"
const routes = [
    {
        // 会匹配所有路径
        path: '*',
        name: 'Windmill',
        component: Windmill,
        meta: {
            title: '哎呀页面不见了-' + name
        }
    },
    {
        path: '/blog',
        name: 'NewHome',
        component: NewHome,
        meta: {
            // 需要被缓存
            keepAlive: true, 
            title: '文章-' + name
        }
    },

常用方法

• 动态路由：此配置用于动态的设置路由参数，就如 https://www.yunmobai.cn/blog/3 网址，后面的3是动态请求获取，然后在根据值，再去获取数据。
• 路由跳转：可以通过<route-link>标签进行跳转，但有时需要通过js进行跳转，如axios统一拦截是对为登录用户跳转到登录界面等！
• 路由懒加载：使用懒加载，防止首屏加载的空白时间过长！
• 路由守卫者：对路由跳转进行操作！如，保存数据提示等等，可以有全局守望和组件守卫，对不同的需求进行使用。

// 动态路径参数 以冒号开头
{ path: '/blog/:id', component: Blog }
//获取参数
this.$route.params.id
//跳转
this.$router.push('/user-admin')
//组件守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

简单配置

import http from '@/utils/httpindex.js'
const user = {
    //初始化
    state: {
        token: localStorage.getItem('user_token') || '',
    },
    //store.commit('setToken')
    mutations: {
        setToken(state, data) { //写入token
            state.token = data
        },
    },
    //store.dispatch('setToken')
    actions: {
        setToken({ commit }, data) {
            // localStorage.setItem("so_token", data);
            commit('setToken', data)
        }
    }
}
export default user

通过以上的基本配置，就可以把服务器传过来的state保存起来

• state:一个初始 state 对象
• mutations: 更改 Vuex 的 store 中的状态的唯一方法，
• actions: 通过提交的是 mutation，而不是直接变更状态 ， 可以包含任意异步操作。

大多数都是通过actions调用mutations去修改数据，而不直接通过 store.state.token去修改token值

axios

通过axios的封装对后台的数据进行统一的处理，能够提高开发效率，

import axios from 'axios'
import store from '../pages/home/store'
import { Notification } from 'element-ui';
import router from '@/pages/home/router'
var instance = axios.create({
    //请求地址
    baseURL: process.env.VUE_APP_URL,
    //超时时间
    timeout: 10000,
});
// 添加请求拦截器
instance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    //设置请求头
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        // Message('操作成功')
        if (response.headers.authorization) {
            //通过VueX保存数据
            store.dispatch("setToken", response.headers.authorization);
        }
        // 打印错误信息
        return Promise.reject(response.data)
    },
    function(error) {
        // 对响应错误做点什么
        switch (error.response.status) {
           
            case 422:
                Notification.warning({
                    title: '温馨提示',
                    message: error.response.data.message,
                    onClose() {
                        //通过VueX清除用户信息
                        store.dispatch("logOut")
                        router.push('/login')
                    },
                });
                break;
            default:
                Notification.error({
                    title: '错误提示 ' + error.response.status,
                    message: error.response.data.message,
                });

        }
        return Promise.reject(error)
    });
export default instance;

在main.js中把axios的get和post方法挂载到vue的原型上，在之后就可以通过this.$get和this.$post去请求数据了。

Vue.prototype.$get = axios.get;
Vue.prototype.$post = axios.post;

本文为个人理解，若有不足，敬请指出