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 处理导航到 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 或其中的函数，那么我需要进入导入它的每个组件并修改导入语句。

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

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

原文由 Ege Ersoz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

你描述的是 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

原文由 CodinCat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Hammerbot 发布，翻译遵循 CC BY-SA 4.0 许可协议