Vuex -跨模块共享公共函数
Vuex -跨模块共享公共函数
提问于 2018-03-15 12:00:37
我正在开发一个Vue Js2应用程序，目前我正在构建商店和不同的模块来分离代码。有没有一种方法可以编写一个通用函数并在所有模块之间共享它？
例如，我有一个需要在customer.js、cart.js、address.js中使用的truncate()函数。如果我在store.js中声明它并尝试在模块中使用，它会抛出一个错误。导出和导入是唯一的方法吗？共享函数的最佳方式是什么？
回答 3
Stack Overflow用户
发布于 2018-03-15 13:03:25
最简单的情况自然就是在js文件中定义一个常规函数，然后在需要的任何地方导入/使用它。
不过，还有一些特定于Vue的方法：
对于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("-n-e-w-N-A-M-E-");
this.changeTitle("-n-e-w-T-I-T-L-E-");
}, 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实例中常见的可重用函数，可以使用。对于最一般的情况，有 (小心使用)：
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: '-o-n-e-'},
mounted() { this.myStr1 = this.truncate(this.myStr1); }
})
new Vue({
el: '#app2',
data: {myStr2: '-t-w-o-'},
mounted() { this.myStr2 = this.truncate(this.myStr2); }
})
// ...and components
Vue.component('my-comp', {
template: '#t3',
data() { return {myStr3: '-t-h-r-e-e-'} },
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>
Stack Overflow用户
发布于 2018-03-15 13:20:22
使用Mixins，@acdcjunior有最好的答案，但我给你提供了另一个选择，只需在你的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>
Stack Overflow用户
发布于 2018-03-15 12:40:14
您可以使用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调用通用的truncate函数
import { eventBus } from '<path of file>';
eventBus.$emit('truncate');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49291360
复制相关文章
相似问题
腾讯云开发者
