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

【问题标题】：How to separate the methods of a .vue component in an external .js file?如何在外部 .js 文件中分离 .vue 组件的方法？
【发布时间】：2019-06-23 02:53:02
【问题描述】：

我的组件留下了许多代码行，所以我决定将这些方法放在一个名为 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个错误：

vue.runtime.esm.js?2b0e:587 [Vue 警告]：创建钩子时出错：“TypeError: this.getLists is not a function”

TypeError: this.getLists 不是函数

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

【问题讨论】：

getLists()，不是this.getLists()。
如果您确实希望它们成为方法，您可能需要创建一个mixin

标签： javascript vue.js vuejs2

【解决方案1】：

另一个回答者是正确的，您需要使用export 而不是export default。

如果你真的需要它们成为组件实例上的方法，在导入它们之后，你可以像这样将它们添加到方法中：

methods: {
  deleteList,
  sendList,
  getLists,
  anotherFunction() {
   ...
  },
}

然后它们将可以通过this.getLists() 等方式访问。它仍然是几行代码（您要导入的每个方法一个），但比拥有该方法和所有相关逻辑要少得多。

哦，至于第三个错误，not defined on the instance but referenced during render?当模板中的某些内容未在脚本部分中正确定义时，就会发生这种情况。您是否在要输入list 的地方输入了lists？

【讨论】：

【解决方案2】：

我想有两件事应该解决：

首先要确保在您的 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() },
...

【讨论】：