#### 整个组件暴露在外的可以引用的对象如下 * 如果想用util里面的对象或者函数，需要在页面里面引用组件，用组件调用的方式引入 ``` import iViewThemes from 'iview-layout-themes' ``` * 下面我们都认为已经引入组件 #### 一.为状态管理暴露出来的两个对象app，user 1 app：这个是状态管理的model包，主要存放系统相关的状态管理 2 user：这个是用户登录后，需要存放的全局的用户信息相关内容 这个两个内容都是引用在store里面的，代码如下： ~~~ import Vue from 'vue' import Vuex from 'vuex' import iViewTheme from 'iview-layout-themes' import createPersistedState from 'vuex-persistedstate' const app = iViewTheme.util.app const user = iViewTheme.util.user Vue.use(Vuex) export default new Vuex.Store({ plugins: [createPersistedState({ storage: window.sessionStorage })], state: { }, mutations: { }, actions: { }, modules: { user, app } }) ~~~ #### 二.apiRequest为调用接口暴露出来的axios封装函数 在src下的api目录下，建立的接口js需要如下定义 ~~~ import iViewTheme from 'iview-layout-themes' const axios = iViewTheme.util.apiRequest export const demo1 = (abc) => { return axios.request({ url: '/Api/Api/tt', data: { id: abc }, type: 'post', php: true }) } ~~~ #### 三.getToken获取登录token信息，主要是在路由守卫里面用到，部分代码如下 ~~~ router.beforeEach((to, from, next) => { if (to.name === config.homeName) { // 清理面包屑导航数据 store.dispatch('setBreadCrumb', { list: [], name: 0 }) } else { store.dispatch('setBreadCrumb', { list: store.state.app.menuListData, name: null, path: to.path }) } const token = getToken() if (!token && to.name !== LOGIN_PAGE_NAME) { // 未登录且要跳转的页面不是登录页 next({ name: LOGIN_PAGE_NAME // 跳转到登录页 }) } else if (!token && to.name === LOGIN_PAGE_NAME) { // 未登陆且要跳转的页面是登录页 next() // 跳转 } else if (token && to.name === LOGIN_PAGE_NAME) { console.log(config.homeName, '2222') // 已登录且要跳转的页面是登录页 next({ name: config.homeName // 跳转到homeName页 }) } next() }) ~~~