模块化之后,想用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. KeyBoardEvent

    顺便提一句 在纯Flash CS环境下初始要这样写stage?init(null):addEventListener (Event.ADDED_TO_STAGE, init);即 if(stage ! ...

  2. 【剑指offer】字符串替换

    请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. *StringBuffer 扩容 str ...

  3. 服务容错保护断路器Hystrix之六:缓存功能的使用

    高并发环境下如果能处理好缓存就可以有效的减小服务器的压力,Java中有许多非常好用的缓存工具,比如Redis.EHCache等,当然在Spring Cloud的Hystrix中也提供了请求缓存的功能, ...

  4. 用R语言实现对不平衡数据的四种处理方法

    https://www.weixin765.com/doc/gmlxlfqf.html 在对不平衡的分类数据集进行建模时,机器学**算法可能并不稳定,其预测结果甚至可能是有偏的,而预测精度此时也变得带 ...

  5. es6 class函数的用法,及兼容程度

    //es6中 class的新特性:面向对象的方式 class name{ fram(){ var div=document.getElementById("div"); div.s ...

  6. python之路——4

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.ASCII: 字母 数字 特殊字符,1个字节(8位)表示 Unicode :16位 两个字节 一个 ...

  7. 关于解决logging模块写出的日志信息重复的问题

    一般情况下,我们在利用logging模块记录日志的时候,往往会利用下面这种方式进行日志信息的记录: import logging def logger_file(): #生成logger对象 whw_ ...

  8. random模块常用功能

  9. (转)Linux 系统服务的启动顺序解析 rc.*

    介绍系统按照不同级别启动时需要启动的服务. 进入目录:etc 执行命令:ls -l | grep "rc.*" | sort 结果如下图:   1 系统在启动时,通过inittab ...

  10. ipv6 操作

    netsh interface teredo set state disablednetsh interface ipv6 add v6v4tunnel interface=IP6Tunnel 120 ...