vue全局变量存储的几种方式

只可读的

1、全局变量专用模块（vue调用时要导入，不用this）

1：新建一个global.js，声明变量，采用export将其暴露出来。如

const mobileReg = /(^1[0|1|2|3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/ //手机号，11位纯数字 const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/ //密码，6-15位英文数字组合 const chineseReg = /[u4e00-u9fa5]/ //中文 const digitalReg = /^\d+(\.{1}\d+)?$/ //数字 const hostReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}|(:[0-9]{1,4}))+\.?/ //域名 const nickReg = /^[A-Za-z\d\u2E80-\u9FFF【】\[\]\(\)\-\,\，\?\？\.\。\;\:\：\；\\\、\“\”\‘\']+$/ //昵称，只能是中文/数字/英文字母 以及特殊符号 const accountReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,20}$/ //账号，5-20位英文数字组合 const emailReg = /^([a-zA-Z0-9_])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ //邮箱 function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem] } export { mobileReg, passwordReg, chineseReg, digitalReg, hostReg, nickReg, accountReg, emailReg ，getRandColor }

调用~~.vue

import { mobileReg } from "@/utils/global";  if (!mobileReg.test(this.form.mobile)) { this.$toast("请输入正确的手机号");  return false;  }

2、全局变量模块挂载到Vue.prototype里。（调用不需要导入，要用this）

 

main.js import {loginBaseURL} from './utils/config' Vue.prototype.$baseImageUrl = baseImageUrl Vue.prototype.$appName = 'My App' ---.vue this.$baseImageUrl.value this.$appName

可读改的

1:在main.js的data中设置

main.js定义 new Vue({ router, data: function(){ return { ORDERID: 'PLDxxxxxx0001', } }, render: h => h(App) }).$mount('#app'); 某个vue页面 // 修改 this.$root.ORDERID = "xxxxx" // 引用 let orderId = this.$root.ORDERID

2：Cookie的使用（js-cookie插件）

一、安装 npm install js-cookie --save 二、引用 import Cookies from 'js-cookie' 三、一般使用 存到Cookie去 1.Cookies.set('name', 'value'); Cookies.set('name', 'value', { expires: 7 }); Cookies.set('name', 'value', { expires: 7, path: '' }); 2.在Cookie中取出 Cookies.get('name'); 3.删除 Cookies.remove('name');

3：vuex（状态管理模式，data共享）

                                         -------------------------------------------------------》看下篇