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共享）

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