Vue.js - 在组件方法中使用函数

Question

我有一个 vue2 组件，其中一些方法很长，有很多回调，我想更好地结构化它。我尝试遵循 callbackhell.com 中的指南但是在 vue 方法中事情看起来并不那么容易。

以下是我目前所处位置的示例，它有效，但我对以下内容感到困惑:

Function hoisting在这里似乎不起作用，我需要先定义我的函数，然后再运行它们，否则会触发错误。为什么会这样，我在这里错过了什么吗？

当我像这样定义内部函数时，我失去了绑定(bind)到其中的 Vue 组件的“this”。我通过 .bind(this) 修复它在函数定义之后，它可以工作，但看起来相当晦涩。有没有更好的方法来定义方法中的实用函数，同时仍然保持“this”的上下文？

这通常将函数添加到方法中是 Vue 中的一种好方法吗？我知道我可以直接在 methods: {} 中使它们成为同级方法对象，这解决了我的大部分问题，但因为它们仅与 saveFavourites() 相关方法而不是组件中的任何其他内容，将它们包装在我看来更干净？

非常感谢

methods: {
    saveFavourites() {
        var promptName = function() {
            return this.$swal({
                text: 'Enter name'),
                content: 'input',
                button: {
                    text: 'Save'),
                    closeModal: true,
                },
            })
        }.bind(this);

        var storePlan = function(name) {
            if(!name || (name = name.trim()) === '' ) return;
            axios.post('/api/user-store-daily-favourites', { meals: this.mealIds, name: name })
                .then(response => {
                    if(response.data.status === 'success') {
                        this.$emit('dailyFavouritesUpdated');
                    }
                });
        }.bind(this);

        // running it - if I move this above functions definitions, I get error
        promptName()
            .then( (name) => storePlan(name) );
    },

Answer 1

对于问题 1，提升仅适用于函数声明，不适用于函数表达式。比较:

// Expression
var promptName = function() {

到:

// Declaration
function promptName() {

如需进一步阅读，请参阅:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function

对于问题 2，使用 bind很好，但您可能会发现使用箭头函数更容易，它保留了周围的 this值(value)。

var promptName = () => {
  return this.$swal({
    ...
  })
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

对于问题 3，这似乎是个人喜好问题，但通常我会将它们移至单独的 Vue methods .您需要考虑通常的权衡取舍。也许你觉得间接的代价太高了，你宁愿把所有的代码都放在一个地方。没关系。

在这种特定情况下，我建议您查看 async/ await而不是使用所有这些额外的功能。但是，请注意，在尝试使用 async 之前，请确保您充分理解了 Promise。/ await与 async 的大多数问题一样/ await来自于不了解用于实现它的底层机制。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
async/ await版本看起来像这样:

async saveFavourites() {
  const name = await this.$swal({
    text: 'Enter name',
    content: 'input',
    button: {
      text: 'Save',
      closeModal: true,
    },
  });

  if(!name || (name = name.trim()) === '' ) return;

  const response = await axios.post('/api/user-store-daily-favourites', {
    meals: this.mealIds,
    name: name
  });

  if(response.data.status === 'success') {
    this.$emit('dailyFavouritesUpdated');
  }
}