Vue.js - Cung cấp các chức năng trợ giúp trên toàn cầu cho các thành phần tệp đơn

Tôi có một dự án Vue 2 có nhiều (hơn 50) thành phần tệp đơn . Tôi sử dụng Vue-Router để định tuyến và Vuex cho trạng thái.

Có một tệp, được gọi là helpers.js , chứa một loạt các hàm có mục đích chung, chẳng hạn như viết hoa chữ cái đầu tiên của một chuỗi. Tệp này trông giống như sau:

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

Tệp main.js của tôi khởi tạo ứng dụng:

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

Tệp App.vue của tôi chứa mẫu:

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script>

Sau đó, tôi có một loạt các thành phần tệp đơn, mà Vue-Router xử lý điều hướng đến bên trong <router-view>thẻ trong mẫu App.vue.

Bây giờ, hãy nói rằng tôi cần sử dụng capitalizeFirstLetter()hàm bên trong một thành phần được định nghĩa trong SomeComponent.vue . Để làm điều này, trước tiên tôi cần nhập nó:

<template>Some Component</template>

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

Điều này nhanh chóng trở thành một vấn đề vì tôi kết thúc việc nhập hàm vào nhiều thành phần khác nhau, nếu không phải tất cả chúng. Điều này có vẻ lặp đi lặp lại và cũng làm cho dự án khó duy trì hơn. Ví dụ: nếu tôi muốn đổi tên helpers.js hoặc các hàm bên trong nó, thì tôi cần phải đi vào từng thành phần duy nhất nhập nó và sửa đổi câu lệnh nhập.

Tóm lại: làm cách nào để làm cho các hàm bên trong helpers.js khả dụng trên toàn cầu để tôi có thể gọi chúng bên trong bất kỳ thành phần nào mà không cần phải nhập chúng trước rồi thêm vào thistên hàm? Về cơ bản tôi muốn có thể làm điều này:

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

bên trong bất kỳ thành phần nào mà không cần phải nhập chúng trước và sau đó thêm nó vào tên hàm

Những gì bạn mô tả là mixin .

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

Đây là một hỗn hợp toàn cầu. với điều này TẤT CẢ các thành phần của bạn sẽ có một capitalizeFirstLetterphương thức, vì vậy bạn có thể gọi this.capitalizeFirstLetter(...)từ các phương thức thành phần hoặc bạn có thể gọi nó trực tiếp như capitalizeFirstLetter(...)trong mẫu thành phần.

Ví dụ làm việc: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

Xem tài liệu tại đây: https://vuejs.org/v2/guide/mixins.html

Nếu không, bạn có thể cố gắng làm cho trình trợ giúp của mình hoạt động như một plugin:

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

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

Vue.use(plugin)

Khi helper.jsxuất các chức năng của bạn, theo cách này:

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

hoặc là

export default { 
  capFirstLetter(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  },
  img2xUrl(val) {
    return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
  },
};

Sau đó, bạn sẽ có thể sử dụng chúng ở bất kỳ đâu trong các thành phần của mình bằng cách sử dụng:

this.$helpers.capitalizeFirstLetter()

hoặc bất kỳ nơi nào trong ứng dụng của bạn bằng cách sử dụng:

Vue.helpers.capitalizeFirstLetter()

Bạn có thể tìm hiểu thêm về điều này trong tài liệu: https://vuejs.org/v2/guide/plugins.html

Tạo một bản mixin mới:

"src / mixins / generalMixin.js"

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

Sau đó nhập nó vào main.js của bạn như:

import '@/mixins/generalMixin'

Từ bây giờ bạn sẽ có thể sử dụng chức năng như this.capitalizeFirstLetter(str)trong tập lệnh thành phần của bạn hoặc không thistrong một mẫu.

Bạn phải sử dụng thisvì bạn đã trộn một phương thức vào thể hiện Vue chính. Nếu có những cách để loại bỏ thisnó có thể sẽ liên quan đến điều gì đó không bình thường, thì đây ít nhất là một cách chia sẻ các chức năng được lập thành văn bản sẽ dễ hiểu cho bất kỳ nhà phát triển Vue nào trong tương lai cho dự án của bạn.

Sử dụng Webpack v4

Tạo một tệp riêng biệt để có thể đọc được (vừa được thả vào thư mục plugin). Sao chép từ phản hồi @CodinCat và @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')
      }
    }
  })

Sau đó nhập vào tệp main.js hoặc app.js của bạn

//app.js
import mixin from './plugins/mixin' 

SỬ DỤNG:

Gọi this.sampleFunction()hoặcthis.capitalizeFirstLetter()

Sử dụng bộ lọc chung nếu nó chỉ liên quan đến cách dữ liệu được định dạng khi hiển thị. Đây là ví dụ đầu tiên trong tài liệu :

{{ message | capitalize }}

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

Câu hỏi tuyệt vời. Trong nghiên cứu của mình, tôi nhận thấy vue-injection có thể xử lý điều này theo cách tốt nhất. Tôi có nhiều thư viện hàm (dịch vụ) được giữ riêng biệt với các phương pháp xử lý logic thành phần vue tiêu chuẩn. Lựa chọn của tôi là để các phương thức thành phần chỉ là người ủy quyền gọi các chức năng dịch vụ.

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

Nhập nó vào tệp main.js giống như 'store' và bạn có thể truy cập nó trong tất cả các thành phần.

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