一、全局引入文件

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. 最小生成树-prim算法模板

    题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...

  2. Network | DHCP

    动态主机设置协议(Dynamic Host Configuration Protocol, DHCP)是一个局域网的网络协议,使用UDP协议工作,主要有两个用途: 给内部网络或网络服务供应商自动分配I ...

  3. Mybatis逆向生成使用扩展类

    1.背景介绍 用的mybatis自动生成的插件,然而每次更改数据库的时候重新生成需要替换原有的mapper.xml文件,都要把之前业务相关的sql重新写一遍,感觉十分麻烦,就想着把自动生成的作为一个基 ...

  4. 数字类型(NSInteger,NSUInteger,NSNumber)

    在Objective-C中,我们可以使用c中的数字数据类型,int.float.long等.它们都是基本数据类型,而不是对象.也就是说,不能够向它们发送消息.然后,有些时候需要将这些值作为对象使用. ...

  5. iOS -- SKEmitterNode类

      SKEmitterNode类 继承自 SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObje ...

  6. win10 nginx + django +flup 配置

    1 安装 Nginx 官网下载,直接点exe启动即可 2 安装django pip install django 注意 新建立项目时 python *****/django-admin.py star ...

  7. iOS集成百度地图方法步骤

    前言:app中的导航功能越来越流行,现在我自己做的项目中也有此需求,做过了后记录下笔记.  由于源代码保密所以这里仅仅提供demo,下面是效果图 一:iOS地图SDK 1.打开 百度地图api链接 i ...

  8. 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载一(PhoneGap中的API)

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  9. Django小项目练习

    Django学生管理系统 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^class_list/', views.class_list ...

  10. ORACLE 11G 单实例 磁盘文件系统 DG 归档日志删除脚本 基于RED HAT LINUX 5.3 X86 64BIT

    近期做个DG的归档日志删除, [oracle@.local logs]crontab -l * 8 * * * sh /home/oracle/dbscripts/del_arc.sh 该脚本分别调用 ...