Vue2.0 http请求以及loading展示（续）

花痴完了继续：

先来张目录结构

1、准备好你想表达的loading界面，这里我就简单的用文字表示，你可以随意发挥。conponents文件下新建Loading.vue

<template><div id="loading">加载中，请稍后...</div></template>

2、引入App.vue

import Loading from './components/Loading.vue'

components:{    Loading  },

<Loading v-show="showLoading"></Loading>

3，重点来了----- vuex 跟store

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。store（仓库）是 Vuex 应用的核心。"store" 基本上就是一个容器，它包含着你的应用中大部分的状态（state）。更多专业详情参考https://vuex.vuejs.org/zh-cn/intro.html

首先，在components同级目录下新建文件夹store，内部包含文件store.js, actions.js,mutations.js还有type.js

store.js

import Vue from 'vue'import Vuex from 'vuex'import actions from './actions.js'import mutations from './mutations.js'Vue.use(Vuex)export default new Vuex.Store({modules:{mutations},actions})

actions.js

import * as types from './type.js'export default{showloader:({ commit }) => {commit( types.SHOWLOADING )},hideloader:({ commit }) => {commit( types.HIDELOADING )},}

mutations.js

import { SHOWLOADING,HIDELOADING } from './type.js'const state = {showLoading:false}const mutations = {[SHOWLOADING](state){state.showLoading = true;},[HIDELOADING](state){state.showLoading = false;}}const getters = {showLoading(state){return state.showLoading}}export default {state,mutations,getters}

type.js

export const SHOWLOADING =  'SHOWLOADING';export const HIDELOADING =  'HIDELOADING';

直接的关系可以多看看官方文档，，我就用一张图来解释了

刚开始写会觉得麻烦，，但是当你的state需求量增加时，就很方便了，直接按部就班的复制就好。

4、完善一下main.js，配置请求

import Vue from 'vue'import VueRouter from 'vue-router'import axios from 'axios'import App from './App.vue'import routes from './router.js'import stores from './store/store.js'Vue.use(VueRouter)const router = new VueRouter({    routes})Vue.prototype.$http = axios;axios.interceptors.request.use(function(config){    stores.dispatch('showloader')    return config},function(err){    return Promise.reject(err)});axios.interceptors.response.use(function(response){    stores.dispatch('hideloader')    return response},function(err){    return Promise.reject(err)});new Vue({  el: '#app',  router,  store:stores,  render: h => h(App)})

接下来测试一下，，将focus.vue里获取data方法的文件路径改一下，假装是个错的路径或者加载太慢，run一下后，结果如下

恢复路径又一切正常了~

我尽量把语言表达的接近自己的思路了，不造你们能不能看懂