Js-使辅助函数对单文件组件全局可用

我有一个 Vue 2项目，有许多(50 +) 单文件组件。我使用 Vue 路由器的路由和 Vuex 的状态。

有一个名为 Helpers.js的文件，其中包含许多通用函数，例如将字符串的第一个字母大写。这个文件看起来像这样:

export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}

我的 主要的文件初始化应用程序:

import Vue from 'vue'
import VueResource from "vue-resource"
import store from "./store"
import Router from "./router"
import App from "./components/App.vue"


Vue.use(VueResource)


const app = new Vue({
router: Router,
store,
template: '<app></app>',
components: { App },
}).$mount('#app')

我的 App.vue文件包含模板:

<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>


<script>
export default {
data() {
return {
// stuff
}
}
}
</script>

然后，我有一些单文件组件，Vue-Router 处理它们在 App.vue 模板中的 <router-view>标记内导航到这些组件。

现在假设我需要在 一些组成部分中定义的组件中使用 capitalizeFirstLetter()函数。为了做到这一点，我首先需要导入它:

<template>Some Component</template>


<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>

这很快就成为一个问题，因为我最终将函数导入到许多不同的组件中，如果不是全部的话。这似乎是重复的，也使得项目更难维护。例如，如果我想重命名 helpers.js，或者它内部的函数，那么我需要进入每个导入它的组件并修改 import 语句。

长话短说: 如何使 helpers.js 全球范围内中的函数可用，以便在 任何组件中调用它们，而不必先导入它们，然后在函数名前面加上 this？我基本上希望能够做到这一点:

<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
108748 次浏览
小开

否则，你可以尝试让你的助手运行一个插件:

import Vue from 'vue'
import helpers from './helpers'


const plugin = {
install () {
Vue.helpers = helpers
Vue.prototype.$helpers = helpers
}
}


Vue.use(plugin)

在 helper.js中导出你的函数，这样:

const capFirstLetter = (val) => val.charAt(0).toUpperCase() + val.slice(1);
const img2xUrl = (val) => `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;


export default { capFirstLetter, img2xUrl };

或者

export default {
capFirstLetter(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
},
img2xUrl(val) {
return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
},
};

然后，您应该能够在组件的任何地方使用它们，使用:

this.$helpers.capitalizeFirstLetter()

或应用程序中的任何地方，使用:

Vue.helpers.capitalizeFirstLetter()

您可以在文档 https://v2.vuejs.org/v2/guide/plugins.html中了解有关这方面的更多信息

小开
最佳答案

在任何组件中，而不必首先导入它们，然后将其添加到函数名中

你描述的是 混音。

Vue.mixin({
methods: {
capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1);
}
})

这是一个全局混合。使用这个 ALL，您的组件将有一个 capitalizeFirstLetter方法，所以您可以从组件方法调用 this.capitalizeFirstLetter(...)，或者您可以直接在组件模板中作为 capitalizeFirstLetter(...)调用它。

工作示例: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

请参阅这里的文档: https://v2.vuejs.org/v2/guide/mixins.html

小开

问得好。在我的研究中，我发现 vue 注射可以以最好的方式处理这个问题。我有许多函数库(服务)与标准 vue 组件逻辑处理方法分开。我的选择是让组件方法只是调用服务函数的委托者。

Https://github.com/jackmellis/vue-inject

小开

将它导入 main.js 文件，就像‘ store’一样，您可以在所有组件中访问它。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
小开

创建一个新的 mix in:

“ src/Mixins/generalMixin.js”

Vue.mixin({
methods: {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
})

然后把它导入到你的主文件中，比如:

import '@/mixins/generalMixin'

从现在起，您将能够在组件脚本中使用类似于 this.capitalizeFirstLetter(str)的函数，或者在模板中不使用 this。例如:

<template>
<div>\{\{ capitalizeFirstLetter('hello') }}</div>
</template>

必须使用 this，因为在主 Vue 实例中混合了一个方法。如果有办法删除 this，它可能涉及一些非常规的东西，这至少是一个 记录在案的共享功能，这将是容易理解的任何未来的 Vue 开发你的项目。

小开

使用 Webpack v4

为可读性创建一个单独的文件(只是在插件文件夹中删除了我的文件)。 转载自@CodinCat 和@digout 回复。

//resources/js/plugins/mixin.js
import Vue from 'vue';
    

Vue.mixin({
methods: {
capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1),
sampleFunction() {
alert('Global Functions');
},
}
});

然后，导入 main.js 或 app.js 文件。

//app.js
import mixin from './plugins/mixin';

用法:

呼叫 this.sampleFunction()或 this.capitalizeFirstLetter()。

小开

如果全局筛选器只涉及在呈现时如何格式化数据，则使用该筛选器。这是 医生的第一个例子:

\{\{ message | capitalize }}

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

提交答案