javascript - vue.js 异步回调函数

Question

我有一个模态组件，它只是 window.confirm 的一个花哨版本，我通过注入插件使它在我的 nuxt 应用程序中的任何地方都可以调用。

组件/confirmModal.vue

<template>
  <transition name="fade">
    <div
      v-if="isShow"
      @click="handleClickOverlay"
      class="confirm-modal-overlay"
      id="swConfirm"
    >
      <transition name="zoom">
        <div v-if="isShow" ref="swConfirmDialog" class="confirm-modal-container">
          <span class="confirm-modal-text-grid">
            <h4 v-if="dialog.title" class="confirm-modal-title">{{ dialog.title }}</h4>
            <p v-if="dialog.message" class="confirm-modal-text">{{ dialog.message }}</p>
          </span>
          <div
            class="confirm-modal-btn-grid"
            :class="{ isMono: !dialog.button.no || !dialog.button.yes }"
          >
            <button
              v-if="dialog.button.no"
              @click.stop="e => handleClickButton(e, false)"
              class="confirm-modal-btn left"
            >
              {{ dialog.button.no }}
            </button>

            <button
              v-if="dialog.button.yes"
              @click.stop="e => handleClickButton(e, true)"
              class="confirm-modal-btn"
            >
              {{ dialog.button.yes }}
            </button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import { events } from '../plugins/confirm-modal'

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

const Component = {
  name: 'swConfirmDialog',
  data() {
    return {
      isShow: false,
      dialog: {
        title: '',
        message: '',
        button: {}
      },
      params: {}
    }
  },
  methods: {
    resetState() {
      this.dialog = {
        title: '',
        message: '',
        button: {},
        callback: () => {}
      }
    },
    handleClickButton({ target }, confirm) {
      if (target.id == 'swConfirm') return
      this.isShow = false
      if (this.params.callback) {
        this.params.callback(confirm)
      }
    },
    handleClickOverlay({ target }) {
      if (target.id == 'swConfirm') {
        this.isShow = false
        // callback
        if (this.params.callback) {
          this.params.callback(false)
        }
      }
    },
    open(params) {
      this.resetState()
      this.params = params
      this.isShow = true
      Object.entries(params).forEach(param => {
        if (typeof param[1] == typeof this.dialog[param[0]]) {
          this.dialog[param[0]] = param[1]
        }
      })
    },
    registerEvents() {
      events.$on('open', this.open)
      events.$on('close', () => {
        this.handleClickOverlay({ target: { id: 'swConfirm' } })
      })
    }
  },
  mounted() {
    this.registerEvents()
  }
}
export default Component
</script>

插件/确认-modal.js

import SwConfirmModal from "~/components/SwConfirmModal.vue"
import Vue from "vue"

export const events = new Vue({
  name: 'sw-confirm-modal'
})

export default (ctx, inject) => {
    Vue.component('sw-confirm-modal', SwConfirmModal)
    const confirm = params => {
      events.$emit('open', params)
    }
    confirm.close = () => {
      events.$emit('close')
    }
    ctx.$confirm = confirm
    inject("confirm", confirm)
  }

我在我的组件中调用它，就像下面的代码一样，但是因为我想在我的回调中执行异步函数，所以我一直收到错误"Syntax Error: Can not use the keyword 'await' outside an async function"

methods: {
    logout(){
      this.$confirm(
        {
          message: `confirm logout?`,
          button: {
            no: 'Cancel',
            yes: 'OK'
          },
          callback: confirm => {
            if (confirm) {
              let res = await this.$auth.logout()
            }
          }
        }
      )
    }
  }

标签： javascriptvue.jsvue-componentnuxt.js

Answer 1

只需将回调更改为异步

callback: async (confirm) => {
  if (confirm) {
    let res = await this.$auth.logout()      
  }
}