Vue.js 如何添加全局函數或變數?

01-04

使用了 vue-loader 構建一個大一點的應用, 但是這裡好像沒有後端常見的中間件或自定義基礎類庫. 有許多組件都涉及到的常量或函數時, 不想每個組件都重新寫一遍. 怎麼做才好?

寫個插件，給Vue.prototype掛上常量，比如Vue.prototype.Const = 你的那坨常量，甚至再來個Vue.prototype.utils。

Plugins - vue.js文檔看這兒，這是1.0的。

參考插件 - vue.js ，或者用混合 - vue.js 做 AOP 。

插件

util.js

export default{ install(Vue,options) { Vue.prototype.getData = function () { console.log("我是插件中的方法"); } } }

main.js 引入並且全局註冊

import util from "./util" Vue.use(util);

其他組件中使用

this.getData();

如果僅僅是常量和基礎類庫，難道不是寫一個公共的 util.js export出去，然後到處require就可以了嗎？

既然有人問，那就更新一個代碼片段，下面我們假設 main.js 和 util.js 在同級目錄，其餘情況按照相對路徑改一下，只舉例工具函數，變數和類是一個意思。

// type 1 // util.js


export function square(n) {

	return n * n;

}
// main.js
import { square } from "./util.js"
console.log(square(2)); // 4
// type 2

// util.js
export function square(n) {

	return n * n;

}
// main.js
import { square as calcSquare } from "./util.js"
console.log(calcSquare(2)); // 4
// type 3

// util.js
export default function square(n) {

	return n * n;

}
// main.js
import square from "./util.js"

console.log(square(2)); // 4

import util from "jspath/common/util"


Vue.prototype.utilHelper = util

頁面調用：this.utilHelper.getLocalUrl()

詳情可以參考這個：https://github.com/zhoou/vue-cli-multipage-bootstrap/blob/master/src/module/OfficialDemo/app.js

不知道理解的是不是這個意思。

A、B、C組件都需要一個方法showconfigJudge（變數就用data：{}定義即可）。

vue.js配置中有個mixin選項，寫個mixin export一下放到需要使用的組件就行了，如下圖所示，第一個為定義被重複使用到的mixin，其中的配置與vue組件的配置一樣，可以寫data：{}，methods：{}以及其他鉤子。

只需要在A、B、C組件中引入showConfigMixin然後在組件內的配置mixins:[showConfigMixin]就可以了。這樣子A、B、C三個組件都能使用到showconfigJudge方法了。

如果是全部組件都需要有的話，就可以在main.js中使用全局的mixin。

局部：

全局：

上面的兄弟們也說了，也可以使用vuex，去看vuex的官方文檔即可。

創建一個全局變數模塊 Global.vue，然後在需要的地方引用

我是寫在Vuex的store.state裡面的。不知道合適的做法，求其他大神指點。

既然提到了「大一點」而且數據變數管理

那我們推薦 vuex 嘍，可以看看我們專欄裡面的 vuex 的文章有源碼和實戰

全局函數放filters里, 用的時候Vue.filter("filtername")

全局變數放到單獨文件， export出去，用的時候import就

你問題里已經回答了，你感覺為了許多常量和函數重新寫組件不對的，如果其他答主的回答幫不了你，你想想你的解耦就行了。

直接在js中定義global.name = ... ，外邊require這個js，就可以全局用了

Vue.prototype 然後掛載後面可以跟任何東西調用的時候this 或者vm調用就好了