Vuex - 跨模塊共享通用功能

Question

我正在開發一個 Vue Js 2 應用程序，我目前正在構建商店和不同的模塊以分離出代碼。 有沒有辦法編寫一個通用函數並在所有模塊之間共享它？

例如，我有一個函數 truncate() 需要在 customer.js、cart.js、address.js 中使用。 如果我在 store.js 中聲明它並嘗試在模塊中使用，它會引發錯誤。 出口和進口是唯一的方法嗎？ 共享功能的最佳方式是什么？

Answer 1

最簡單的情況自然是在 js 文件中定義一個常規函數，然后在需要的任何地方導入/使用它。

但是，有一些特定於 Vue 的方法：

對於Vuex 模塊中常見的可重用功能，您可以使用Vuex 插件。

檢查下面的示例。 注意根存儲的用法： plugins: [myTruncatePlugin] 。

 const myTruncatePlugin = store => { store.truncate = function(str) { return str.replace(/-/g, '') + ' ...was truncaaaated!'; // example implementation } } const moduleA = { namespaced: true, state: {name: "name@moduleA"}, mutations: { changeName(state, data) { state.name = this.truncate(data); } }, } const moduleB = { namespaced: true, state: {title: "title@moduleB"}, mutations: { changeTitle(state, data) { state.title = this.truncate(data); } }, } const myStore = new Vuex.Store({ strict: true, modules: { aaa: moduleA, bbb: moduleB }, plugins: [myTruncatePlugin] // IMPORTANT: YOU MUST DECLARE IT HERE }); new Vue({ store: myStore, el: '#app', mounted: function() { setTimeout(() => { this.changeName("-newNAME-"); this.changeTitle("-newTITLE-"); }, 200); }, computed: { ...Vuex.mapState('aaa', ['name']), ...Vuex.mapState('bbb', ['title']) }, methods: { ...Vuex.mapMutations('aaa', ['changeName']), ...Vuex.mapMutations('bbb', ['changeTitle']) } })

 <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuex"></script> <div id="app"> <p>moduleA's name: {{ name }}</p> <p>moduleB's title: {{ title }}</p> </div>

對於 Vue 實例中常見的可重用函數，您可以使用Mixins 。 對於最一般的情況，有Global Mixin （小心使用）：

 Vue.mixin({ methods: { truncate(str) { return str.replace(/-/g, '') + ' ...was truncaaaated!'; // example implementation } } }) // this.truncate() will be available in all Vue instances... new Vue({ el: '#app1', data: {myStr1: '-one-'}, mounted() { this.myStr1 = this.truncate(this.myStr1); } }) new Vue({ el: '#app2', data: {myStr2: '-two-'}, mounted() { this.myStr2 = this.truncate(this.myStr2); } }) // ...and components Vue.component('my-comp', { template: '#t3', data() { return {myStr3: '-three-'} }, mounted() { this.myStr3 = this.truncate(this.myStr3); } }); new Vue({ el: '#app3', })

 <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script> <div id="app1">App1: "{{ myStr1 }}"</div> <div id="app2">App2: "{{ myStr2 }}"</div> <template id="t3"> <div>App3's component: "{{ myStr3 }}"</div> </template> <div id="app3"><my-comp></my-comp></div>

Answer 2

@acdcjunior 使用 Mixins 有最好的答案，但我只是通過在 Vue 實例中聲明方法來為您提供另一種選擇。

所以下面的例子，我在 Vue 實例中創建doTruncate方法，然后組件通過this.$parent.doTruncate調用它們

 // register Vue.component('cart-component', { template: '<button @click="doTruncate">Cart Truncate!</button>', methods: { doTruncate: function() { this.$parent.doTruncate("Hello from cart"); } } }) // register Vue.component('customer-component', { template: '<button @click="doTruncate">Customer Truncate!</button>', methods: { doTruncate: function() { this.$parent.doTruncate("Hello from customer"); } } }) var app3 = new Vue({ el: '#app', methods: { doTruncate: function(params) { alert(params); } } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script> <div id="app"> <cart-component></cart-component> <br> <customer-component></customer-component> <br> <button @click="doTruncate('Hello from parent')"> Parent! </button> </div>

Answer 3

您可以使用 vue js 事件來共享功能，例如

eventBus.js // 它將創建公共實例

import Vue from 'vue';
export const eventBus = new Vue();

common.js // 你的常用函數將進入這個文件

import { eventBus } from '<path of file>'; 

mounted() {
    eventBus.$on('truncate',()=> {
        this.truncate();
    })
}

methods: {
    truncate(){
        //truncate code
    }
}

customer.js // 從 customer.js 中調用常用的截斷函數

import { eventBus } from '<path of file>'; 
eventBus.$emit('truncate');