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

Question

我的组件留下了许多行代码，因此我决定将这些方法放在一个名为functions.js 的单独文件中。我无法调用这些方法。

我试过这个：

函数.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个错误：

vue.runtime.esm.js?2b0e:587 [Vue warn]: 创建钩子时出错：“TypeError: this.getLists 不是函数”

类型错误：this.getLists 不是一个函数

属性或方法“列表”未在实例上定义，而是在渲染期间引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是反应性的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

Answer 1

我想有两件事应该解决：

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

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

export { sendList, getLists, deleteList }

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

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

export { sendList, getLists, deleteList }

2. 第二件事，导入它们并使用 without this，如下所示：

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