在不同的js页面中定义Vue方法函数

Question

新手，对不起这个愚蠢的问题

我有一个vuu组件vuu

/path_to_main/vue_file/app.js

const vuu = new Vue({
    el: '#vuu',
    data: {
        latitude: 'longi',
        longitude: 'lati'
    },
    created: function(){this.checkIfGeolocationAvailable();},
    methods: {
        checkIfGeolocationAvailable: function(){
            getLocation(); // <-- this function
        }


    }
});

现在我想在另一个js页面上定义getLocation()

/path_to_main/vue_file/helper.js

function getLocation() {alert("Hello");}

我怎样才能做到这一点？ 还是这是完全错误的方法？

Answer 1

模块化永远不是错误的方法。

使用es6 modules和transpiler如webpack ， typescript等

helper.js

export function getLocation() {alert("Hello");}

main.js

import {getLocation} from './helper.js'

一旦开始使用翻译器，您还应该考虑使用Vue single file components 。 此外，通过利用vue-cli-3 ，您可以消除大部分繁琐的样板配置，测试和构建。

Answer 2

我创建了一个辅助文件夹，但这不是必需的

助手/ getLocation.js

export default function getLocation() {
  alert("Hello")
}

应用程序

<template>
  <div id="app">
  </div>
</template>

<script>
import getLocation from './helper/getLocation.js'

export default {
  name: 'App',
  data() {
    return {}
  },
  mounted() {
    getLocation()
  }
}
</script>