一、全局引入文件

1、先定义共用组件 common.vue


<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>

2、在需要使用的地方导入


<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用
globalHttpUrl: global.httpUrl
}
},

3、使用


<template>
{{globalHttpUrl}}
</template>

二、main.js中引入全局变量和方法

1、定义共用组件同上
2、main.js中引入并复制给vue


// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global

3、使用


export default {
data () {
return {
username: '',
password: '',
// 赋值使用, 可以使用this变量来访问
globalHttpUrl: this.COMMON.httpUrl
}
},

三、定义common.js文件,直接在main.js中引入,直接使用
1、common.js 这里注意 Vue.http 组件中使用 this.$http


import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const httpUrl = 'http://39.105.17.99:8080/'
function httpGet (url, params) {
return new Promise((resolve, reject) => {
Vue.http.get(this.httpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
} function httpPost (url, params) {
return new Promise((resolve, reject) => {
Vue.http.post(this.httpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
}
export default {
httpUrl,
httpGet,
httpPost
}

2、main.js


import global from './common/common'
Vue.prototype.GLOBAL = global

3、使用


<template>
{{GLOBAL.httpUrl}} -------------------------------------------- created () {
this.GLOBAL.httpGet('/home/list', {'name': 'zxc', 'password': '123'}).then(
(res) => {
console.log(res)
}
)
},

总结 实例
common.vue文件,项目中的公共,或者全局文件

vue-resource需要先配置一下 main.js


// 配置使用formDate
Vue.http.options.emulateHTTP = true
Vue.http.options.emulateJSON = true

<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function promiseFun (url, params) {
return new Promise((resolve, reject) => {
this.$http.post(this.globalHttpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
}
// 暴露出这些属性和方法
export default {
httpUrl,
promiseFun
}
</script>

使用


export default {
data () {
return {
username: '',
password: '',
globalHttpUrl: global.httpUrl,
promiseFun: global.promiseFun
}
},
methods: {
loginInFun () {
localStorage.setItem('userId', '00001')
let params = {
telphone: this.username,
password: this.password
}
this.promiseFun('itArtison/user/login', params).then(
(res) => {
console.log(res)
this.$Message.info(res.message)
// 登录成功过以后,这里从初session
// 先将对象转换为json字符串
localStorage.setItem('userInfo', JSON.stringify(res.data))
if (res.code === '0000') {
this.$router.push({'name': 'Home'})
}
},
(err) => {
console.log(err)
this.$Message.info(err.message)
}
)
}
}

来源:https://segmentfault.com/a/1190000015842187

vue定义全局变量和全局方法的更多相关文章

  1. Adobe Edge Animate--关于全局变量和全局方法的定义

    Adobe Edge Animate--关于全局变量和全局方法的定义 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. BY:sonicxsxs 前文中有关音 ...

  2. 在MFC下如何定义全局变量和全局函数

    用MFC制作的工程由很多文件构成,它不能象一般C++程序那样随意在类外定义全局变量,在这里要想定义能被工程内多个文件共享的全局变量和函数必须用一些特殊方法才行.实际上有多种方法可以实现,这里只介绍两种 ...

  3. Vue(八)全局变量和全局方法

    一.在main.js同级目录建立一个common.js文件 // 全局变量 const globalObj = {}; // 定义公共变量 globalObj.name = '小明'; // 定义公共 ...

  4. 如何在微信小程序定义全局变量、全局函数、如何实现 函数复用 模块化开发等问题详解

    1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp();  app.function/key的方式调用,不过我们没有必要 ...

  5. vue 定义全局变量在一个组件内引用

    第一步: 第二步: 第三步: ok!!完了,当然了,你也可以在 main.js里面全局引用,然后用原型链挂在vue上面,用this的方法去获取!!

  6. vue组件挂载到全局方法

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...

  7. Vue 定义全局变量

    main.js 中定义 import Ws from './lib/ws' import ElementUI from 'element-ui'; import GlobalFunc from './ ...

  8. vue定义全局变量

    思路 将变量放到 window 对象上面 1.普通 创建 global.js window.a = 1; main.js 中引用 import './global.js' 实际使用 console.l ...

  9. angularjs定义全局变量

    angularjs定义全局变量 三种方法 直接外层定义全局变量 利用ng的value定义全局变量 利用ng的constant定义全局变量 Takl is cheap, Show me the code ...

随机推荐

  1. U-boot for Tiny4412

    我的开发板型号: Tiny4412ADK + S700 4GB Flash 1. Build uboot a) 安装好toolchain (arm-linux-gcc-4.5.1-v6-vfp-201 ...

  2. WM_SETFOCUS和WM_KILLFOCUS、WM_GETDLGCODE

      procedure WMSetFocus (var Message: TWMSetFocus); message WM_SETFOCUS; //获得焦点 procedure WMKillFocus ...

  3. Direct2D教程(十二)图层

    什么是Layers? Layer,中文译成图层,在Direct2D中可以用来完成一些特殊效果,使用Layer的时候,先将Layer Push到render target,然后进行绘制,此时是直接绘制在 ...

  4. 浅析 rand7生成rand10 方法 之 思想篇(一)

    [问题描写叙述] rand7是一个能生成1-7的随机数.要求利用rand7生成1-10的随机数. [算法思想] 1.组合数学方法 第1次 1 2 3 4 5 6 7 之中用rand7取一个数 第2次从 ...

  5. Six ways to think like a journalist!

    Journalists have the ability to state a thing more clearly. What can we learn from them to help us r ...

  6. javascript一些面试经常使用的问题总结

    有关函数调用变量问题 var a =10; function aaa(){ alert(a); } function bbb(){ var a = 20; aaa(); //10 } bbb(); 变 ...

  7. js 宽和高

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  8. 定义自己的代码风格CheckStyle简单使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...

  9. mysql: Data source rejected establishment of connection, message from server: "Too many connections"

    http://www.oschina.net/question/558677_66703 com.mysql.jdbc.exceptions.MySQLNonTransientConnectionEx ...

  10. 笔记09 WS,WCF

    http://blog.csdn.net/avi9111/article/details/5655563 http://www.cnblogs.com/tearer/archive/2013/04/2 ...