# 前言
全局性的東西在項(xiàng)目開發(fā)中是經(jīng)常用到的棚饵，在nuxt中如何定義全局方法煤裙、指令、組件及過濾器的呢噪漾？
# 全局方法
首先在plugins文件下創(chuàng)建一個(gè)mixins.js文件硼砰，用來注冊(cè)全局性的方法及指令等, 內(nèi)容如下：
import Vue from 'vue'
// 定義全局方法
let testFn = () => {
console.log('我是測(cè)試的全局方法');
}
// 掛載到 vue 原型中
// 注意：服務(wù)端內(nèi)部鉤子不能使用
Vue.prototype.$testFn = testFn ;
配置nuxt.config.js文件
export defult{
plugins: ['@/plugins/mixins']
}
重啟后，就可以在頁(yè)面里調(diào)用剛剛定義的全局方法了
# 全局過濾器
在assets的js文件夾下創(chuàng)建filters.js文件欣硼，用于聲明我們的全局過濾器题翰，內(nèi)容如下：
// 格式化時(shí)間
export const dateFt = date => {
if (!date) return 'e';
const dt = new Date(date);
let y = dt.getFullYear(),
m = dt.getMonth() + 1,
d = dt.getDate(),
h = dt.getHours(),
mm = dt.getMinutes(),
ss = dt.getSeconds();
m = String(m).padStart(2, '0')
d = String(d).padStart(2, '0')
h = String(h).padStart(2, '0')
mm = String(mm).padStart(2, '0')
ss = String(ss).padStart(2, '0')
return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + ss;
}
在plugins下的mixins文件里將過濾器注冊(cè)到全局，如下
import Vue from 'vue'
// 定義全局方法
let testFn = () => {
console.log('我是測(cè)試的全局方法');
};
// 掛載到 vue 原型中
// 注意：服務(wù)端內(nèi)部鉤子不能使用
Vue.prototype.$testFn = testFn;
// 注冊(cè)全局過濾器
// 這里是一次性獲得批量導(dǎo)出的所有對(duì)象方法
import * as filtersList from '@/assets/js/filters'
// 循環(huán)將每個(gè)過濾器注冊(cè)到全局
Object.keys(filtersList).forEach(key => Vue.filter(key, filtersList[key]))
如此就可以在所有的頁(yè)面用全局過濾器了~
# 全局指令
在assets的js文件夾下創(chuàng)建directives.js文件，用于聲明我們的全局過濾器遍愿，內(nèi)容如下：
// 全局指令 1
export const direc1 = {
// 當(dāng)指令綁定到元素上的時(shí)調(diào)用
bind(el, binding, vnode) {
console.log('我是指令1，綁定時(shí)調(diào)用了')
}
};
// 全局指令 2
export const direc2 = {
// 元素插入到 DOM 時(shí)調(diào)用
inserted(el, binding, vnode) {
console.log('我是指令2耘斩，插入時(shí)調(diào)用了')
},
// 組件更新時(shí)調(diào)用
componentUpdated() {
console.log('我是指令2沼填，更新時(shí)調(diào)用了')
}
}
// 指令調(diào)用時(shí)接收的四個(gè)參數(shù)分別是：
// el： 指令所綁定的元素， 可以用來直接操作 DOM括授。
// binding： 一個(gè)對(duì)象坞笙， 包含以下屬性：
// name： 指令名， 不包括 v - 前綴荚虚。
// value： 指令的綁定值薛夜， 例如： v - my - directive = "1 + 1" 中， 綁定值為 2版述。
// oldValue： 指令綁定的前一個(gè)值梯澜， 僅在 update 和 componentUpdated 鉤子中可用。 無論值是否改變都可用渴析。
// expression： 字符串形式的指令表達(dá)式晚伙。 例如 v - my - directive = "1 + 1"中， 表達(dá)式為 "1 + 1"俭茧。
// arg： 傳給指令的參數(shù)咆疗， 可選。 例如 v - my - directive: foo 中母债， 參數(shù)為 "foo"午磁。
// modifiers： 一個(gè)包含修飾符的對(duì)象。 例如： v - my - directive.foo.bar 中毡们， 修飾符對(duì)象為 { foo: true, bar: true }迅皇。
// vnode： Vue 編譯生成的虛擬節(jié)點(diǎn)。衙熔。
// oldVnode： 上一個(gè)虛擬節(jié)點(diǎn)喧半， 僅在 update 和 componentUpdated 鉤子中可用。
在plugins下的mixins文件里將指令注冊(cè)到全局青责，如下
import Vue from 'vue'
// 定義全局方法
let testFn = () => {
console.log('我是測(cè)試的全局方法');
};
// 掛載到 vue 原型中
// 注意：服務(wù)端內(nèi)部鉤子不能使用
Vue.prototype.$testFn = testFn;
// 注冊(cè)全局指令
import * as directivesList from '@/assets/js/directives'
// 循環(huán)將每個(gè)指令注冊(cè)到全局
Object.keys(directivesList).forEach(key => Vue.directive(key, directivesList[key]))
如此就可以在所有的頁(yè)面用全局指令了~
全局組件
在components文件夾下創(chuàng)建ts-button.vue測(cè)試全局組件挺据，內(nèi)容如下：
<template>
<button>全局按鈕</button>
</template>
<script>
export default {
name: 'ts-button'
}
</script>
在plugins下的mixins文件里將指令注冊(cè)到全局，如下
import Vue from 'vue'
// 定義全局方法
let testFn = () => {
console.log('我是測(cè)試的全局方法');
};
// 掛載到 vue 原型中
// 注意：服務(wù)端內(nèi)部鉤子不能使用
Vue.prototype.$testFn = testFn;
// 注冊(cè)全局組件
import TsButton from '@/components/ts-button'
Vue.component('ts-button', TsButton)
如此就可以在所有的頁(yè)面用全局組件了~
