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:

How to mount the vue component globally? Introduction to the method of mounting Vue components globally (code)

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!