Vue开发小技巧

1、全局变量

Vue.prototype.GLOBALAPI = GLOBALAPI;

2、EventHub

let eventHun = new Vue();

Vue.prototype.$eventHun = eventHun;

this.$eventHun.$emit("xxx");

this.$eventHun.$on("xxx",function(param){});

注意：只有已加载并且没被销毁的组件才能接收到$on事件

3、axios拦截器

axios.interceptors.request.use(

  config => {

    if (Vue.prototype.$local.fetch("token")) {

      config.headers.Sid = Vue.prototype.$local.fetch("token");

    }

    return config;

  },

  function(error) {

    return Promise.reject(error);

  }

);

//这里的config是每次请求的参数

axios.interceptors.response.use(

  function(response) {

    if (/logged/.test(response.data.msg)) {

      router.push("/login");

    }

    return response;

  },

  function(error) {

    // Do something with response error

    return Promise.reject(error);

  }

);

//response 是请求的结果

4、Vue插件

let local = {

  save(key, value) {

    localStorage.setItem(key, JSON.stringify(value));

  },

  fetch(key) {

    return JSON.parse(localStorage.getItem(key));

  }

};

export default {

  install: function(vm) {

    vm.prototype.$local = local;

  }

};

//vm就是实例

import Vue from "vue";

import local from "common/js/local";

Vue.use(local);

//在mian.js中使用插件