定义全局变量的几种方式
1.Vuex
在大型应用中,全局变量比较多且需要实时修改时,建议使用Vuex
方法建议看官方文档:https://vuex.vuejs.org/zh/guide/
2.sessionStorage
webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。
sessionStorage仅在当前会话中有效,关闭页面或者浏览器后被清除。存放大小一般为5MB,,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。
访问sessionStorage:
var storage = window.sessionStorage
清除sessionStorage:
storage.clear()
3.localStorage
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
方法与上相似:
var storage = window.localStorage
localStorage和sessionStorage使用时使用相同API:
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
4.global
稍后
5.挂载到Vue.prototype 里
可以挂载一个变量,也可以挂载一个全局变量模块
// main.js
import global_ from './components/tool/Global';
Vue.prototype.GLOBAL = global_;//需要引用的模块处
<script>
export default { data () { return { getColor: this.GLOBAL.getRandColor
}
</script>
import Vue from 'vue'
Vue.prototype.colorsss = 2
但是经过我的实验在组件中只能访问该值,不能修改该值,除非使用set方法,但是这样组件之间的实时更新也存在问题
6.跨模块常量
// conmmon.vue
const host = '//top/mid/xx';
co
export default {host
};
然后在需要用的文件中使用一下方法引入:
import { host } form './conmmon';
如果要使用的常量非常多,可以建一个专门的constants目录,将各种常量写在不同的文件里面,保存在该目录下。
或者数量较小的值被多个模块共享
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3
7.使用window对象
window.map=map;
后续待补充
参考博客:https://blog.csdn.net/qq_21356483/article/details/70177013
定义全局变量的几种方式相关推荐
- C++定义全局变量的两种方式
一.使用extern关键字 cglobal.h #ifndef CGLOBAL_H #define CGLOBAL_H extern int testValue; #endif // CGLOBAL_ ...
- js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式
详解Vue.js 定义全局变量的几种实现方式 发布于 2020-8-11| 复制链接 本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...
- java中定义数组的3种方式
直接上代码和截图 public static void main(String[] args) {// 定义数组的3种方式// 第一种String[] role = new String[3];rol ...
- 定义字符串的两种方式
定义字符串的两种方式 数组定义 char name[] = "answer" 指针定义 char *name = "answer" 比较 字符数组里的字符可以修 ...
- c语言中的全局变量类型,c++全局变量 C/C++中定义全局变量的几种方法及区别
c语言中全局变量主要是定义在所有函数之外的变量,在程序执行的过程中一直有效,可以被任何函数引用.赋值,想要定义它,一般将其定义在主函数main()之外就行. 例如下面的程序段,变量m就是一个全局变量, ...
- Java 定义数组的三种方式,int...x动态参数列表
定义数组的三种方式 以 int型 的一维数组为例,说说三种定义方式 int[] arr = new int[3]; 这是最常用的方式,定义时就含有默认值,可以后续赋值 public class Dem ...
- 代码示例:Java中定义数组的三种方式
在Java中,数组的定义有三种方式,其基本语法格式如下: 数组类型[] 数组名 = new 数组类型[数组长度]; 数组类型[] 数组名 = new 数组类型[]{数组元素0,数组元素1,...}; ...
- C语言:定义字符串的几种方式
#include <stdio.h> #include <stdlib.h>int main() {//定义字符串的几种方式//字符串和字符数组的区别:最后一位是否是空字符ch ...
- 【MATLAB定义函数的几种方式】
MATLAB定义函数的几种方式 方法1:函数文件+函数名调用 比如我想要定义如下函数 f(x)=x2+1f(x)=x^2+1 f(x)=x2+1 可以现在脚本中写一个fun函数,并将其存储为函数同名文 ...
最新文章
- fastjson json串转list
- Linux系统基础网络配置老鸟精华篇
- 使用代理,调用json-server的服务接口
- 如何提升 CSS 性能的小知识
- 利用java反射根据方法名称字符串调用方法
- uniapp 如何配置MySQL_uniapp后台api设计(微信user表)
- 一、Jquery入门(超详)
- ISO9001-2008标准(中英文对照)
- EXCEL【数据处理之数据清洗——缺失数据处理】
- RESTful接口开发规范以及注意事项
- React-Native笔记--Debugger and device times had drifted by more than 60s.
- 霍纳法则c语言算法代码,霍纳法则(Horner's rule)
- mysql中explain执行结果各个字段的意思
- 原生html 写输入键盘,html的原生自定义键盘(数字版)
- 88steamCSGO即开即取回的开箱网站,CSGO皮肤交易平台
- 到底什么是5G CPE?
- 华三路由器qos 简单的接口限速
- mongo-go-driver 踩坑心得 server selection error
- 数据治理工作的几种推进套路
- Python中既有列表,何必再有数组(NumPy‘s ndarray)?