定义全局变量的几种方式

2023-08-07 11:43| 来源: 网络整理| 查看: 265

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_; //需要引用的模块处 export default { data () { return { getColor: this.GLOBAL.getRandColor } 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

【本文地址】

定义全局变量的几种方式

定义全局变量的几种方式

今日新闻

推荐新闻