Vue.js - 使辅助函数对单文件组件全局可用 [英] Vue.js - Making helper functions globally available to single-file components
问题描述
我有一个 Vue 2 项目，它有很多(50+)单文件组件.我使用 Vue-Router 进行路由，使用 Vuex 进行状态.
有一个名为 helpers.js 的文件，其中包含一堆通用函数，例如将字符串的第一个字母大写.这个文件看起来像这样:
export default {大写第一字母(字符串){返回 str.charAt(0).toUpperCase() + str.slice(1);}}我的 main.js 文件初始化应用程序:
从 'vue' 导入 Vue从vue-resource"导入 VueResource从./store"导入商店从./router"导入路由器从./components/App.vue"导入应用程序Vue.use(VueResource)const app = new Vue({路由器:路由器，店铺，模板:'<app></app>',组件:{应用}}).$mount('#app')我的 App.vue 文件包含模板:
<导航栏></导航栏><div class="容器"><路由器视图></路由器视图></模板><脚本>导出默认{数据() {返回 {//东西}}}
然后我有一堆单文件组件，Vue-Router 处理导航到 App.vue 模板中的 <router-view> 标签内部.
现在假设我需要在 SomeComponent.vue 中定义的组件内使用 capitalizeFirstLetter() 函数.为了做到这一点，我首先需要导入它:
某些组件<脚本>从 '../helpers.js' 导入 {capitalizeFirstLetter}导出默认{数据() {返回 {myString = "测试"}},创建(){var newString = this.capitalizeFirstLetter(this.myString)}}这很快就会成为一个问题，因为我最终将该函数导入到许多不同的组件中，如果不是全部的话.这似乎是重复的，也使项目更难维护.例如，如果我想重命名 helpers.js 或其中的函数，那么我需要进入每个导入它的组件并修改 import 语句.
长话短说:如何使 helpers.js 中的函数全局可用，以便我可以在任何组件中调用它们，而无需必须先导入它们，然后在函数名称前加上 this 吗?我基本上希望能够做到这一点:
在任何组件中，无需先导入它们，然后将其添加到函数名称中
你描述的是mixin.
Vue.mixin({方法: {大写首字母:str =>str.charAt(0).toUpperCase() + str.slice(1)}})这是一个全局混入.有了这个，你的所有组件都会有一个 capitalizeFirstLetter 方法，所以你可以从组件方法调用 this.capitalizeFirstLetter(...) 或者你可以直接调用它作为 组件模板中的 capitalizeFirstLetter(...).
工作示例:http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010
请参阅此处的文档:https://vuejs.org/v2/guide/mixins.html
I have a Vue 2 project that has many (50+) single-file components. I use Vue-Router for routing and Vuex for state.
There is a file, called helpers.js, that contains a bunch of general-purpose functions, such as capitalizing the first letter of a string. This file looks like this:
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
My main.js file initializes the app:
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')
My App.vue file contains the template:
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>
I then have a bunch of single-file components, which Vue-Router handles navigating to inside the <router-view> tag in the App.vue template.
Now let's say that I need to use the capitalizeFirstLetter() function inside a component that is defined in SomeComponent.vue. In order to do this, I first need to import it:
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>
This becomes a problem quickly because I end up importing the function into many different components, if not all of them. This seems repetitive and also makes the project harder to maintain. For example if I want to rename helpers.js, or the functions inside it, I then need to go into every single component that imports it and modify the import statement.
Long story short: how do I make the functions inside helpers.js globally available so that I can call them inside any component without having to first import them and then prepend this to the function name? I basically want to be able to do this:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
inside any component without having to first import them and then prepend this to the function name
What you described is mixin.
Vue.mixin({
methods: {
capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1)
}
})
This is a global mixin. with this ALL your components will have a capitalizeFirstLetter method, so you can call this.capitalizeFirstLetter(...) from component methods or you can call it directly as capitalizeFirstLetter(...) in component template.
Working example: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010
See the documentation here: https://vuejs.org/v2/guide/mixins.html
这篇关于Vue.js - 使辅助函数对单文件组件全局可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
