Vue.js - 使帮助函数全局可用于单文件组件

Question

我有一个Vue 2项目,有许多(50+)单文件组件.我使用Vue-Router进行路由,使用Vuex进行状态.

有一个名为helpers.js的文件,它包含许多通用函数,例如大写字符串的第一个字母.这个文件看起来像这样:

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

我的main.js文件初始化了应用程序:

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处理导航到<router-view>App.vue模板中的标签内部.

现在让我们说我需要capitalizeFirstLetter()在SomeComponent.vue中定义的组件中使用该函数.为了做到这一点,我首先需要导入它:

<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>

Answer 1

在任何组件内部,无需先导入它们,然后将其添加到函数名称中

你描述的是mixin.

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

这是一个全球性的混合体.有了这个你的组件将有一个capitalizeFirstLetter方法,所以你可以打电话this.capitalizeFirstLetter(...)

工作示例:http://codepen.io/CodinCat/pen/LWRVGQ？edit = 1010

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

Answer 2

否则,您可以尝试让您的帮助程序运行插件:

编辑2018年3月1日:

制作插件的官方方法是使用安装功能创建一个对象:

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

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

Vue.use(plugin)

然后,您应该可以在组件中的任何位置使用它们:

this.$helpers.capitalizeFirstLetter()

或者在您的应用程序中的任

Vue.helpers.capitalizeFirstLetter()

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

旧的回应:

import helpers from './helpers';
export default (Vue) => {
    Object.defineProperties(Vue.prototype, {
        $helpers: {
            get() {
                return helpers;
            }
        }
    });
};

然后,在您的main.js文件中:

import Vue from 'vue'
import helpersPlugin from './helpersPlugin';

Vue.use(helpersPlugin);

资料来源:https://gist.github.com/logaretm/56126af5867e391ea9507b462259caf3

Answer 3

创建一个新的混入：

“src/mixins/generalMixin.js”

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

然后将它导入到你的 main.js 中，如：

import '@/mixins/generalMixin'

从现在开始，您将能够像this.capitalizeFirstLetter(str)在组件脚本中或不在this模板中一样使用该功能。IE：

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

您必须使用，this因为您将方法混合到主 Vue 实例中。如果有删除this它的方法可能会涉及一些非常规的东西，这至少是一种共享功能的文档化方式，对于未来的项目 Vue 开发人员来说，这将很容易理解。

Answer 4

使用 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().