Как разделить методы компонента .vue во внешнем файле .js?

Question

В моем компоненте осталось много строк кода, поэтому я решил поместить методы в отдельный файл под названием 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 warn]: ошибка в созданном хуке: «TypeError: this.getLists не является функцией»

TypeError:this.getLists не является функцией

Свойство или метод "списки" не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Answer 1

Другой ответчик прав, что вам нужно использовать export вместо export default.

Если вам действительно нужно, чтобы они были методами в экземпляре компонента, после их импорта вы можете добавить их в методы следующим образом:

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

и тогда они будут доступны как this.getLists() и так далее.Это все равно будет несколько строк кода (по одной для каждого импортируемого метода), но намного меньше, чем наличие метода и всей связанной логики.

Да, а что касается третьей ошибки, not defined on the instance but referenced during render?Это происходит, когда в шаблоне есть что-то, что не было должным образом определено в части скрипта.Вы набрали lists где-то, что вы хотели напечатать list?

Answer 2

Я думаю, 2 вещи должны быть исправлены:

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 }

Во-вторых, импортируйте их и используйте без this, как показано ниже:

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