1. 程式人生 > >vue專案常用的方法封裝

vue專案常用的方法封裝

vue全家桶構建專案過程中,需要經常呼叫一些方法,比如axios的請求,下面就將經常用的方法進行封裝

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import Router from 'vue-router'
const $router = new Router()


Vue.prototype.$ajax = axios
Vue.prototype.$qs = qs
//介面的統一域名部分
Vue.prototype.urlPrefix = 'http://xxxxxxxxxx/'

//呼叫ajax方法
Vue.prototype.c_ajax = function (p, u, c,e) {
  //p.token = window.localStorage.getItem('token'),這是本地存token,也可以用vuex
    p.token = this.$store.state.token;
	this.$ajax.post(this.urlPrefix + u, this.$qs.stringify(p)).then(value => c(value)).catch(value=>e(value))
}

//上傳檔案方法
Vue.prototype.c_file = function (p, u, c,e) {
	p.token = this.$store.state.token;
	let config ={
		headers:{'Content-Type':'multipart/form-data'}
	}
	this.$ajax.post(this.urlPrefix + u, this.$qs.stringify(p),config).then(value => c(value)).catch(value=>e(value))
}
// 獲取本地儲存方法
Vue.prototype.getLocalObj = function (n) {
	return (window.localStorage[n] && typeof window.localStorage[n] !== 'undefined' && window.localStorage[n] !== 'undefined') ? JSON.parse(window.localStorage[n]) : ''
}
// 設定本地儲存方法
Vue.prototype.setLocalObj = function (n, o) {
	window.localStorage[n] = (typeof o === 'object') ? JSON.stringify(o) : o
}

  // 圖片處理,如果沒有圖片則使用預設圖片
Vue.prototype.imgPath = function(data){
	let tempdata = /^(https:|http:)/g;
	if(data){
		if(tempdata.test(data)){
		  	return data
		}else{
		  	return (this.urlPrefix + data)
		}
	}else{
		return 'static/img/nopng.jpg'
	}
}