zoukankan      html  css  js  c++  java
  • vue定义全局变量和全局方法

    参考网址:https://segmentfault.com/a/1190000015842187

    一、全局引入文件

    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)
            }
          )
        }
      }
  • 相关阅读:
    AngularJS---核心特性
    前后端分离原理
    吴军 见识 读后感
    CSS 颜色名称和CSS 颜色十六进制值
    springmvc+jsp引用本地图片文件
    Eclipse 构建Maven项目--普通web项目 复制另外一个项目的配置文件导致的问题
    html input type=date 赋值问题 必须yyyy-mm-dd格式
    解决eclipse中运行web项目时弹出的"Port 8080 required by Tomcat 9.0 Server at localhost is already in use...
    解决 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (default-compile)
    SpringMVC HelloWorld实例开发及部署
  • 原文地址:https://www.cnblogs.com/bruce1992/p/15144357.html
Copyright © 2011-2022 走看看