zqifa的博客

我不管,反正我最萌~

vue设置全局变量

1.只读的全局变量

设置只读的全局变量的2种方式:
第1种方法:在 global.js 模块中定义;其他模块import后再使用即可。

定义:

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;
        }
})

export default MyComm;

引用:

import MyComm from "./components/common/comm";
MyComm.deleteCookie('admin_username')

第2种方法:在 gobal.js 模块中定义,并绑定到 prototype,其他任何Vue实例可直接引用 this.$xxxx

定义,绑定&引用:

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;
        }
})

export default MyComm;Vue.prototype.$MyComm = MyComm;
//项目中任何地方都可如此引用 this.$MyComm.deleteCookie('admin_username')

2.可读写的全局变量
如果想随时修改全局变量的值,有一种办法:在main.js中data定义,其他地方通过 this.$root.{paramName} 来引用/修改

main.js 中定义:

new Vue({
    router,
    data: function(){
        return {
            UserName: 'admin',
        }
    },
    render: h => h(App)
}).$mount('#app');

引用

// 修改
this.$root.UserName= "xxxxx"

// 引用
let UserName = this.$root.UserName

作者:zqifa

出处:https://www.l1mn.com

原文地址:https://www.l1mn.com/p/bnvz41.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

分类:jsweb前端vue

Copyright © zqifa 联系方式:z___qf@163.com