Question

我有一个Vue 2项目，有很多（50+）single-file components。我使用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处理导航到App.vue模板中<router-view>标签内部。

现在假设我需要在 SomeComponent.vue 中定义的组件中使用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>

Answer 1

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

您所描述的是 mixin 。

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

这是一个全球性的混音。有了这个，您的所有组件都将采用capitalizeFirstLetter方法，因此您可以拨打this.capitalizeFirstLetter(...)

工作示例：http://codepen.io/CodinCat/pen/LWRVGQ?editors=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

创建一个新的mixin：

“ src / mixins / generalMixin.js”

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

将其导入到您的main.js中，例如：

import '@/src/mixins/generalMixin'

从现在开始，您将能够使用类似this.capitalizeFirstLetter(str)的功能。

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

Answer 4

将其导入main.js文件，就像＆＃39; store＆＃39;并且您可以在所有组件中访问它。

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

Answer 5

使用Webpack v4

创建一个单独的文件以提高可读性（只是将我的文件放到plugins文件夹中）。转载自@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()

Answer 6

如果仅考虑渲染时数据的格式，请使用全局过滤器。这是docs中的第一个示例：

{{ message | capitalize }}

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

Answer 7

好问题。在我的研究中，我发现vue-inject可以以最好的方式处理这个问题。我有许多功能库（服务）与标准的vue组件逻辑处理方法分开。我的选择是让组件方法只是调用服务函数的委托人。

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

Vue.js - 将帮助函数全局提供给单文件组件

7 个答案: