如何分离在外部的.js文件.vue组件的方法？(How to separate the method

我的组件留下了许多行代码，所以我决定把该方法称为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的警告]：错误中创建钩：“类型错误：this.getLists不是一个函数”

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

属性或方法“清单”是不是在实例中定义，但在渲染引用。 请确保此属性是反应性的，无论是在数据选项，或基于类的成分，通过初始化属性。 请参阅： https://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. 第二件事情，将它们导入和使用没有this ，象下面这样：

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

Answer 2:

其他回答者是正确的，你需要使用export ，而不是export default 。

如果你真的需要他们对组件实例的方法，其导入后，你可以将它们添加到像这样的方法：

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

然后他们将作为访问this.getLists()等。 它仍然是几行代码（一个为您导入的每个方法），但比其方法和所有相关的逻辑方式少。

哦，作为第三错误， not defined on the instance but referenced during render ？ 这时候，你有在没有脚本的一部分被正确定义模板有事。 你键入lists的地方，你想键入list ？

文章来源: How to separate the methods of a .vue component in an external .js file?