模块化之后,想用js全局变量,遇到点困难。搜索资料后搞定,大概2个步骤:

1、定义一个vue模块,const定义变量,并用export对外暴露.

Globle.vue

<script>
// 服务端url
const SERVER_BASE_URL = 'http://10.199.xxx.x0:8081/'
export default{
SERVER_BASE_URL
}
</script>

2、在用到全局变量的模块,import后再使用

test.vue

import global_ from 'components/common/Global.vue'
console.log(global_.SERVER_BASE_URL)

------------------------------2018/12/27 定义component.js并在main.js中引用----------------------------

1. 定义并暴露

import Vue from 'vue';

let MyComm = new Vue({
methods: {
deleteCookie: function (cname) {
let d = new Date();
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=; " + expires;
}, getCookie: function (cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}, setCookie: function (cname, cvalue, exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
}
}) export default MyComm;

2. main.js中引用

import MyComm from "./components/common/comm";

const role = MyComm.getCookie('ms_username')

VUE.js全局变量的定义的更多相关文章

  1. VUE中全局变量的定义和使用

    目录 VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) 1.2 传递字段 2.解决方法 2.1 VUEX 2.2 使用全局变量法管理状态与字段值 3.具体实现 3.1创建 ...

  2. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  3. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  4. vue.js原生组件化开发(一)——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  5. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  6. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  7. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  8. Vue.js 2.x:组件的定义和注册(详细的图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

  9. Bug记载2之Vue.JS路由定义的位置

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

随机推荐

  1. windows 下跟踪日志的几个工具总结

    1.baretailpro.exe 2.wintail.exe 3.vim(using tail bundle plugin) 4.Notepad++ (Plugin->Plugin Manag ...

  2. 发现TCP的一种错误----客户端连接失败(10055错误号)

    在客户端连接7302TCP端口失败,关闭程序,启动sockettool也不行,出现错误号为 10055(发现队列满了或者空间不足).通过查网上资料,发现有两个方法:设置 ( TcpTimedWaitD ...

  3. bzoj 4811: [Ynoi2017]由乃的OJ

    树链剖分,用zkw线段树维护每条链两个方向上对每一位的变换情况,由于位数较少,可以用两个unsigned long long表示 #include<cstdio> typedef unsi ...

  4. Java学习---异常处理

    import java.util.Scanner; public class MyExceptionTest { public static void check(Square A) throws W ...

  5. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

  6. nginx配置location总结及rewrite规则写法 (若配置reload或restart不生效就stop start)

    location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的 ...

  7. JVM内存调优

    JVM性能调优有很多设置,这个参考JVM参数即可. 主要调优的目的: 控制GC的行为.GC是一个后台处理,但是它也是会消耗系统性能的,因此经常会根据系统运行的程序的特性来更改GC行为 控制JVM堆栈大 ...

  8. 让android程序根据重力感应旋转屏幕(支持4个方向旋转)

    原文地址:http://blog.csdn.net/yixiaoqingyuz/article/details/6453798代码如下: ChangeOrientationHandler.java p ...

  9. 使用.mongorc.js移除哪些比较“危险”的shell辅助函数

    切换到用户目录下 vi .mongorc.js var no = function(){ print("Not on my watch."); }; //禁止删除数据库 db.dr ...

  10. 数据迁移_把RAC环境备份的数据,恢复到另一台单机Oracle本地文件系统下

    数据迁移_把RAC环境备份的数据,恢复到另一台单机Oracle本地文件系统下 作者:Eric 微信:loveoracle11g 1.创建pfile文件 # su - ora11g # cd $ORAC ...