解決nuxt 自定義全局方法,全局屬性,全局變量的問題
注意 ，這個(gè) 在 asyncData 還是不能用的 ，在mounted等其他生命周期里面可以，
asyncData 里因?yàn)楂@取不到this他在組件初始化前執(zhí)行的，如果找到方法我會(huì)繼續(xù)更新到下一篇博客
好現(xiàn)在說步驟，在plugins 文件夾里新增一個(gè) commom.js名字你自己取
commom.js 測試代碼
import Vue from 'vue'
var comsys= {
install(Vue){
Vue.prototype.comsys = {
val:function(val){
return val
}
};
}
}
Vue.use(comsys);
nuxt.config.js里 添加
plugins:
[
{ src: '~/plugins/commom.js', ssr: false }
],
引用的頁面添加
mounted () {
alert(this.comsys.val(1));
}
恩，這樣就行了~
這個(gè)是實(shí)例方法 其他的屬性 對象 可以參考 vue的官網(wǎng)
補(bǔ)充知識：Nuxt項(xiàng)目使用全局變量，函數(shù)，混合
當(dāng)在Nuxt項(xiàng)目使用CSS預(yù)處理語言時(shí)，很有需要在全局添加變量，函數(shù)或者混合，這樣子在項(xiàng)目的任何一個(gè)地方都可以使用，那怎么做呢？
首先下載@nuxtjs/style-resources
npm install @nuxtjs/style-resources
之后在nuxt.config.js里添加
//.......
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
sass: [],
scss: [],
less: [],
stylus: []
}
//.......
例如，你的使用stylus預(yù)處理語言，你在/asset/css下有個(gè)variable.styl變量文件，可以這樣
export default {
modules: ['@nuxtjs/style-resources'],
styleResources: {
stylus: './assets/css/variable.styl'
}
}
這樣就在全局引入了變量，如果想引入多個(gè)文件可以把路徑改為./assets/css/global/*.styl，把你想要全局注入的文件放在global目錄下就行了
注意：
這里的路徑不能使用~或者@等路徑別名
千萬不要用這種方式注入真正的樣式文件，這種方式僅僅是用來注入變量，函數(shù)，混合等聲明式內(nèi)容，而不是真正的樣式；如果你那樣做，會(huì)在每個(gè)組件內(nèi)注入難以控制的全局樣式，你會(huì)很混亂的
以上這篇解決nuxt 自定義全局方法,全局屬性,全局變量的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3配置代理實(shí)現(xiàn)axios請求本地接口返回PG庫數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue3配置代理實(shí)現(xiàn)axios請求本地接口返回PG庫數(shù)據(jù)的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-03-03
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對象是一個(gè)深度代理,它會(huì)追蹤對象屬性的變更,但如果你將整個(gè)對象重新賦值,那么 Vue 無法繼續(xù)追蹤新的對象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下2024-09-09
vue中js判斷長時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長時(shí)間不操作界面自動(dòng)退出登錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vuex結(jié)合session存儲(chǔ)數(shù)據(jù)解決頁面刷新數(shù)據(jù)丟失問題
在項(xiàng)目中表單篩選項(xiàng)里，選擇完之后刷新頁面數(shù)據(jù)就變了，沒有保留在自己選擇的選項(xiàng)上。本文使用session存儲(chǔ)數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-09-09
vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了VUE中攔截請求并無感知刷新token方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
淺談Vue.nextTick 的實(shí)現(xiàn)方法
本篇文章主要介紹了Vue.nextTick 的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了詳解vue中的computed的this指向問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12