How to define global variables and global methods in vue? (code)-JS Tutorial-php.cn

How to define global variables and global methods in vue? (code)

不言

Release： 2018-08-01 17:04:50

Original

6883 people have browsed it

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>

Copy after login

2. Import it where you need to use it

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

Copy after login

3. Use

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

Copy after login

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

Copy after login

3. Use

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

Copy after login

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

Copy after login

<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>

Copy after login

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)
        }
      )
    }
  }

Copy after login