Question

我正在尝试使用 bootstrap vue alert 构建全局警报组件。我正在使用vuex存储区来维护alert的状态。

下面是我的警报组件Alert.vue

<template>
  <b-alert show :variant="variant" dismissible> {{ message }} </b-alert>
</template>
<script>
export default {
  props: {
    variant: String,
    message: String
  },
  data() {
    return {};
  },
  name: "Alert",

  methods: {},
  computed: {}
};
</script>
<style scoped></style>

下面是我的vuex商店

const alert = {
  namespaced: true,
  state: {
    variant: "",
    message: "",
    showAlert: false
  },
  getters: {
    variant: state => state.variant,
    message: state => state.message,
    showAlert: state => state.showAlert
  },
  mutations: {
    setSuccessvariant(state) {
      state.variant = "success";
    },
    setDangervariant(state) {
      state.variant = "danger";
    },
    setMessage(state, message) {
      state.message = message;
    },
    showAlert(state) {
      state.showAlert = true;
    },
    hideAlert(state) {
      state.showAlert = false;
    }
  },
  actions: {}
};

export default alert;

我在另一个组件中调用警报组件

<alert v-if="showAlert" :message="message" :variant="variant"></alert>

showAlert在此组件中的计算方式为

showAlert() {
      return this.$store.getters["alert/showAlert"];
   }

这仅适用于第一次。警报是在我第一次触发时打开的。单击关闭图标后，我将无法恢复警报。

Answer 1

将show属性替换为v-model，以便在单击关闭按钮时，showAlert的值将在vuex存储中更新：

<b-alert 
  v-model="showAlert" 
  :variant="variant" 
  dismissible
> {{ message }} 
</b-alert>

...

computed: {
  showAlert() {
    get() {
      this.$store.getters["alert/showAlert"]
    },
    set(value) {
      // MODIFY THIS MUTATION
      this.$store.commit("setShowAlert", value)
    }
  }
}

Vuex：

mutations: {
  setShowAlert(state, value) {
    state.showAlert = value
  }, 
}

也请尝试用v-if="showAlert"替换v-show="showAlert"，也许您在组件重新呈现时遇到了一些问题

Answer 2

您必须控制被撤消事件发生的情况。组件show属性不接受true或false以外的任何东西，而这很少是您真正用作触发警报的触发器。

因此，只要必须显示警报，就不要使用绑定到您希望不为null的字符串属性的v模型。它不起作用。

此组件无法评估非布尔值标志。

使用v-bind：如下图所示

    <b-alert v-bind:show="error!=null" 
dismissible variant="danger" @dismissed="error=null">
        {{error}}
    </b-alert>

取消警报后，会将error设置为null，并将翻转显示状态。然后，如果您再次将错误设置为某些错误，它将正确翻转状态。

撤消boostrap vue警报后，它将不再起作用

2 个答案:

Vuex：