我正在尝试创建一个可以在Vue中使用但无法访问这些方法的全局对象。我想在不同的组件中使用这些方法。此外,什么是最好的方法。我听说过使用Mixins,但我正在考虑尝试一个基本的javascript对象。我希望我能以正确的方式提出这个问题。
的src / myobject.js
exports.myObj = () => {
function testMethod() {
console.log('working');
}
}
src / main.js
import Vue from 'vue'
import App from './App'
import { store } from './store/store'
import { myObj } from './myobject'
Vue.config.productionTip = false
myObj.testMethod() // NOT WORKING - TypeError: __WEBPACK_IMPORTED_MODULE_3_
/* eslint-disable no-new */
new Vue({
el: '#app',
store: store,
components: { App },
template: '<App/>'
})
src / components / App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'App',
mounted: function () {
myObj.testMethod() // NOT WORKING
},
components: {
}
}
</script>
<style>
body {
margin: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
答案 0 :(得分:2)
要创建一个导出命名函数和默认对象的简单ES模块,您可以这样定义:
export function testMethod() {
console.log('working');
}
export function otherMethod() {
console.log('other method');
}
// optionally export a default object
export default {
testMethod,
otherMethod
}
然后,可以导入它:
import { testMethod } from './myobject';
// or import the default export
import myObj from './myobject';
myObj.testMethod();
现在,到use it in your Vue components,我已经在另一个答案中解释了多种方式。使用Vue mixins是一种方式(谨防全球混合),writing a plugin是另一种方式。
在你的情况下,它可能是一个简单的混合:
// my-mixin.js
import { testMethod } from './myobject';
export default {
mounted() {
testMethod();
}
}
将具有相同名称的钩子函数合并到一个数组中,以便调用所有这些函数。
<script>
// components/App.vue
import MyMixin from '../my-mixin'
export default {
name: 'App',
mixins: [MyMixin],
mounted() {
console.log('both this function and the mixin one will be called');
},
components: {
}
}
</script>
您的代码无效的原因是您导出的函数不执行任何操作。 testMethod
未公开,它只是在导出的函数中声明为本地函数。