Home > Article > Web Front-end > How to define global variables and global methods in vue? (code)
This article introduces to you how to define global variables and global methods in vue? (code), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Global import file
1. First define the common component common.vue
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>
2. Import it where you need to use it
<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用
globalHttpUrl: global.httpUrl
}
},
3. Use
<template>
{{globalHttpUrl}}
</template>
2. Introduce global variables and methods into main.js
1. Define shared components as above
2. Introduce them into main.js and copy them to vue
// 导入共用组件 import global from './common.vue' Vue.prototype.COMMON = global
3. Use
export default {
data () {
return {
username: '',
password: '',
// 赋值使用, 可以使用this变量来访问
globalHttpUrl: this.COMMON.httpUrl
}
},
to summarize the example
common.vue file, the public in the project, or the global file
vue-resource needs to be first Configure 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>
Use
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)
}
)
}
}
Recommended related articles:
Detailed explanation of global variables and global functions defined in the vue project
About Detailed explanation of several methods of defining global variables in VUE
The above is the detailed content of How to define global variables and global methods in vue? (code). For more information, please follow other related articles on the PHP Chinese website!