vue 挂载全局函数/变量utils
vue 2017-10-16 13:29:07

入口 main.js：

JavaScript Code复制内容到剪贴板
  1. import global from './utils/global'  
  2.   
  3. Vue.prototype.global = global  

在脚手架的开发目录src中，新建一个untils目录，新建global.vue，内容：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     const baseUrl = "统一变量";         // 定义变量  
  3.       
  4.     // 定义方法  
  5.     function getCategoryData() {  
  6.           
  7.         return 111;  
  8.   
  9.     }  
  10.   
  11.     export default {  
  12.         baseUrl,  
  13.         getCategoryData,  
  14.     }  
  15. </script>  

 

在组件中使用：

JavaScript Code复制内容到剪贴板
  1. console.log(this.global.getCategoryData());  
  2. console.log(this.global.baseUrl);  

变量不需要加括号，括号内可传参

 

在全局中，引用vuex，axios，以及UI组件：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     import Vue from 'vue'  
  3.     import store from '../vuex/store'  
  4.     import axios from 'axios'  
  5.     import { Toast } from 'mint-ui'  
  6.       
  7.     function getCategoryData() {  
  8.         axios.get(store.state.api.getCategory).then((response) => {  
  9.             store.commit("changeCategoryData", response.data.items);  
  10.             // 响应成功回调  
  11.         }, (response) => {  
  12.             var tips = "请求失败，刷新或联系管理员！";  
  13.             if(response.status === 0) {  
  14.                 tips = "网络连接失败，请检查请求接口是否异常";  
  15.             }  
  16.             Toast(tips);  
  17.             // 响应错误回调  
  18.         });  
  19.   
  20.     }  
  21.   
  22.     export default {  
  23.         getCategoryData,  
  24.     }  
  25. </script>  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/171.html

上一篇 mint-ui Picker组件相关问题
下一篇 vue 插件开发
相关的文章
Powered by yoyo苏ICP备15045725号