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)
            }
          )
        }
      }
  • 相关阅读:
    函数式编程(二):curry
    函数式编程(一):纯函数
    用 gulp 建一个服务器
    深度学习-Tensorflow2.2-预训练网络{7}-迁移学习基础针对小数据集-19
    深度学习-Tensorflow2.2-自定义训练综合实例与图片增强{6}-猫狗数据集实例-18
    深度学习-Tensorflow2.2-Tensorboard可视化{5}-可视化基础-17
    深度学习-Tensorflow2.2-Eager模式与自定义训练{4}-微分运算训练练习-16
    深度学习-Tensorflow2.2-卷积神经网络{3}-电影评论数据分类/猫狗数据集实例-15
    深度学习-Tensorflow2.2-批标准化简介-14
    深度学习-Tensorflow2.2-卷积神经网络{3}-卫星图像识别卷积综合实例(二分类)-13
  • 原文地址:https://www.cnblogs.com/bruce1992/p/15144357.html
Copyright © 2011-2022 走看看