#### 整個組件暴露在外的可以引用的對象如下 * 如果想用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() }) ~~~