常用封装函数的使用

vuex使用

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。本项目中模块化使用，便于维护。

1、创建store

本项目在src/store/module文件下建立你所要储存数据的js模块；

例如（userInfo.js）：

export default {
    namespaced: true,
    state: {
       // 存放状态
        pageName: ''
    },
    mutations: {
       // 更改state中状态的逻辑，同步操作
        setPageName(state, id) {
            state.pageName = id;
        }
    },
    actions: {
       // 提交mutation，异步操作
    }
};

在src/store/index.js文件引用； 例如：

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersistence from 'vuex-persist';
import userInfo from './module/userInfo';
Vue.use(Vuex);
export default new Vuex.Store({
    //这块代码为持久化储存，需要安装插件VuexPersistence
    plugins: [
        new VuexPersistence({
            reducer: state => ({
                userInfo: state.userInfo//这个就是存入localStorage的值
            }),
            storage: window.localStorage
        }).plugin
    ],
    // 引入模块
    modules: {
        userInfo
    }
});

在页面中使用： 方法1: 在组件的methods中提交

methods: {
  setPageName(){
    this.$store.commit('userInfo/setPageName', row.template_name);
  }
}

引用：this.$store.state.userInfo.pageName;

方法2: 使用mapMutaions

页面中注入import { mapState, mapMutaions } from 'vuex';

methods: {
            ...mapMutaions([
                'setPageName' //映射
            ]),
      }

引用：

computed: {
            ...mapState('userInfo', [
                'setPageName'
            ])
        }

注：vuex有多种传值以及调用方法；具体的可以参考vuex的官方文档；

Cookies储存封装函数

目录：src/libs/util.js；

页面中使用：

// 引入方法
import { getCookies, setCookies，removeCookies } from '@/libs/util'
储存数据：setCookies('token','kfhskd')
获取数据：getCookies('token')
移除数据：removeCookies('token')

request请求封装

目录：src/libs/request.js； 例如：

前置拦截：
service.interceptors.request.use(
    config => {
        if (config.kefu) {
            let baseUrl = Setting.apiBaseURL.replace(/adminapi/, 'kefuapi');
            config.baseURL = baseUrl;
        } else {
            config.baseURL = Setting.apiBaseURL;
        }
        const token = getCookies('token');
        const kefuToken = getCookies('kefu_token');
        if (token || kefuToken) {
            config.headers['Authori-zation'] = config.kefu ? 'Bearer ' + kefuToken : 'Bearer ' + token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

后置拦截：
200：成功；
400：操作错误；
400012：没权限或者是没登录；
410000、410001、410002：自动退出登录（token失效、时间到期）；
410003：自动退出客服；
service.interceptors.response.use(
    response => {
        let status = response.data ? response.data.status : 0;
        const code = status;
        switch (code) {
            case 200:
                return response.data;
            case 400:
            case 400011:
            case 400012:
                return Promise.reject(response.data || { msg: '未知错误' });
            case 410000:
            case 410001:
            case 410002:
                localStorage.clear();
                removeCookies('token');
                removeCookies('expires_time');
                removeCookies('uuid');
                router.replace({ path: '/admin/login' });
                break;
            case 410003:
                removeCookies('kefuInfo');
                removeCookies('kefu_token');
                removeCookies('kefu_expires_time');
                removeCookies('kefu_uuid');
                router.replace({ path: '/kefu' });
            default:
                break;
        }
    },
    error => {
        Message.error(error.msg);
        return Promise.reject(error);
    }
);   

路由拦截

目录：src/router/index.js；

前置拦截：
router.beforeEach(async (to, from, next) => {
    if (to.fullPath.indexOf('kefu') != -1) {
        return next();
    }
    if (Setting.showProgressBar) iView.LoadingBar.start();
    // 判断是否需要登录才可以进入
    if (to.matched.some(_ => _.meta.auth)) {
        // 这里依据 token 判断是否登录，可视情况修改
        const token = getCookies('token');
        if (token && token !== 'undefined') {
            const access = store.state.userInfo.uniqueAuth;
            const isPermission = includeArray(to.meta.auth, access);
            if (isPermission) {
                next();
            } else {
                next({
                    name: '403'
                });
            }
            // next();
        } else {
            // 没有登录的时候跳转到登录界面
            // 携带上登陆成功之后需要跳转的页面完整路径
            next({
                name: 'login',
                query: {
                    redirect: to.fullPath
                }
            });
            localStorage.clear();
            removeCookies('token');
            removeCookies('expires_time');
            removeCookies('uuid');
        }
    } else {
        // 不需要身份校验 直接通过
        next();
    }
});

后置拦截：
router.afterEach(to => {
    if (Setting.showProgressBar) iView.LoadingBar.finish();
    // 更改标题
    setTitle(to, router.app);
    // 返回页面顶端
    window.scrollTo(0, 0);
});    

有关日期（今天、昨天、近7天）

目录：src/libs/timeOptions.js；

全局挂载：
import timeOptions from "@/libs/timeOptions";
Vue.prototype.$timeOptions = timeOptions;
调用：this.$timeOptions   

form表单的全局调用

目录：src/utils/modalForm.js；

全局挂载：
import modalForm from '@/utils/modalForm';
Vue.prototype.$modalForm = modalForm;
调用：this.$modalForm(createApi({ id: this.levelId })).then(() => this.getList());