欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何定義全局變量和全局方法實(shí)例代碼

 更新時(shí)間：2023年04月24日 11:39:46   作者：鄭建007  
在項(xiàng)目中經(jīng)常會(huì)復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下

開發(fā)中會(huì)經(jīng)常用到一些常用的變量和方法   例如ajax這種

一、給vue定義全局變量

1.定義專用模塊來配置全局變量

定義一個(gè)專用模塊來配置全局變量，然后通過export暴露出去，在需要的組件引入global.vue

// 定義一些公共的屬性和方法
const httpUrl = 'http://test.com'
// 暴露出這些屬性
export default {
    httpUrl,
}

 引入及使用

<script>
    // 導(dǎo)入共用組件
    import global from './global.vue'
    export default {
        data () {
            return {
                //使用
                globalUrl: global.httpUrl
            }
        }
    }
</script>

2.通過全局變量掛載到Vue.prototype

同上，定義一個(gè)專用模塊來配置全局變量，然后通過export暴露出去，在需要的組件引入global.vue

// 定義一些公共的屬性和方法
const httpUrl = 'http://test.com'
// 暴露出這些屬性
export default {
    httpUrl,
}

在main.js中引入并復(fù)制給vue

// 導(dǎo)入共用組件
import global from './global.vue'
Vue.prototype.global = global

組件調(diào)用

export default {
    data () {
        return {
           // 賦值使用, 可以使用this變量來訪問
           globalHttpUrl: this.global.httpUrl
    }
}

3.使用vuex

安裝：

npm install vuex --save

新建store.js文件

import Vue from 'vue' 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state:{ httpUrl:'http://test.com' } 
})

main.js中引入

import store from './store' 
new Vue({
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
});

組件內(nèi)調(diào)用

console.log(this.$store.state.httpUrl)

二、給vue定義全局方法

1.將方法掛載到 Vue.prototype 上面

簡單的函數(shù)可以直接寫在main.js文件里定義。

// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
  alert('執(zhí)行成功');
}

使用方法

//直接通過this運(yùn)行函數(shù)，這里this是vue實(shí)例對象
this.changeData();

2. 利用全局混入 mixin

新建一個(gè)mixin.js文件

export default {
    data() {
 
    },
    methods: {
        randomString(encode = 36, number = -8) {
            return Math.random() // 生成隨機(jī)數(shù)字,
                .toString(encode) // 轉(zhuǎn)化成36進(jìn)制
                .slice(number) 
        }
    }
}

// 在項(xiàng)目入口 main.js 里配置

import Vue from 'vue'
import mixin from '@/mixin'
 
Vue.mixin(mixin)

// 在組件中使用

export default {
    mounted() {
        this.randomString()
    }
}

3. 使用插件方式

plugin.js文件，文件位置可以放在跟main.js同一級，方便引用

exports.install = function (Vue, options) {
    Vue.prototype.test = function (){
        console.log('test');
    };
};

main.js引入并使用。

import plugin from './plugin'
Vue.use(plugin);

所有的組件里就可以調(diào)用該函數(shù)。

this.test();

總結(jié)

到此這篇關(guān)于vue如何定義全局變量和全局方法的文章就介紹到這了,更多相關(guān)vue定義全局變量和全局方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論