Vue.js-使助手功能全局可用于单文件组件

我有一个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>

在任何组件内部，而无需先导入它们，然后在其前面加上函数名称

您描述的是mixin。

Vue.mixin({
  methods: {
    capitalizeFirstLetter: 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

否则，您可以尝试使您的助手功能成为插件：

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 : //vuejs.org/v2/guide/plugins.html

创建一个新的mixin：

“ 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使用模板中的功能。

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

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

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

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

像“商店”一样将其导入到main.js文件中，您可以在所有组件中对其进行访问。

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