javascript - 如何在外部.js文件中分离.vue组件的方法？

我的组件中剩下很多行代码，因此我决定将这些方法放在一个单独的文件中，命名为functions.js。我不能调用那些方法。
我尝试了这个:
functions.js

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export default {sendList, getLists, deleteList}

MyLayout.vue

...
<script>
import {sendList, getLists, deleteList} from '../statics/functions.js'
...
created() { this.getLists();},
...

出现3个错误:

最佳答案

我猜应该修正两件事:

首先是要确保在functions.js文件中不带default进行导出，如下所示:

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export { sendList, getLists, deleteList }

...或者使用ES6语法更漂亮:

const sendList = () => {...};
const getLists = () => {...};
const deleteList = (listId) => {...}

export { sendList, getLists, deleteList }

第二件事，将其导入并在不使用this的情况下使用，如下所示:

...
<script>
import { sendList, getLists, deleteList } from '../statics/functions.js'
...
created() { getLists() },
...