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

Question

我有一个 Vue 2 项目，其中有许多 (50+) single-file components .我使用 Vue-Router 进行路由，使用 Vuex 进行状态。

有一个名为helpers.js 的文件，其中包含一堆通用函数，例如将字符串的首字母大写。该文件如下所示:

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

我的 ma​​in.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 或其中的函数，则需要进入导入它的每个组件并修改导入语句。

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

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

Answer 1

inside any component without having to first import them and then prepend this to the function name

你描述的是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://v2.vuejs.org/v2/guide/mixins.html