vue中弹出确认窗口只显示一次

在Vue.js中，如果你想要在一个页面中避免某个弹出确认窗口频繁地多次显示，你可以利用Vuex状态管理或者事件总线来控制这个行为。这里提供一种常见的解决方案：

1. **Vuex**:
- 首先，在Vuex store中添加一个标志变量，例如`showConfirmationModal`，默认值设为`false`。
- 当需要显示确认窗口时，通过`actions`调用一个方法，将`showConfirmationModal`设置为`true`。
- 在组件模板中，使用计算属性或者watcher监听这个状态变化，只有当它变为`true`时才显示弹窗，并在用户操作后将其恢复为`false`。

// store.js
export const state = () => ({
  showConfirmationModal: false,
});

export const mutations = {
  setShowConfirmationModal(state, value) {
    state.showConfirmationModal = value;
  },
};

// 弹窗组件
<template>
  <div v-if="showConfirmationModal">
    // 显示确认窗口...
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState('confirmation', ['showConfirmationModal']),
  },
  methods: {
    handleConfirm() {
      this.$store.commit('setShowConfirmationModal', false);
      // 用户确认后的处理...
    },
  },
};
</script>

2. **事件总线**:
- 创建一个全局事件中心如Vue.prototype.$bus或一个单独的Bus实例。
- 当需要显示确认窗口时，发送事件到事件中心。
- 在每个组件中，订阅这个事件并在接收到时检查是否需要显示，同样在确认后清除事件并隐藏窗口。

// bus.js (如果已安装vue-event-bus库)
import VueEventBus from 'vue-event-bus';

const eventBus = new VueEventBus();

// 组件A
methods: {
  showAlert() {
    eventBus.$emit('showConfirmation');
  },
}

// 组件B (即根组件或其他接收事件的地方)
created() {
  eventBus.$on('showConfirmation', () => {
    // 显示确认窗口...
    eventBus.$once('hideConfirmation', () => {
      eventBus.$off('showConfirmation hideConfirmation');
    });
  });
}