一旦解除了 boostrap vue 警报，它就不再工作了

Question

我正在尝试使用bootstrap vue alert构建一个全局警报组件。我正在使用store 来保持警戒状态。vuex

下面是我的警报组件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将属性替换为，以便当您单击关闭按钮时，vuex 存储中v-model的值会更新：showAlert

<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)
    }
  }
}

视图：

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

还可以尝试替换v-if="showAlert"为v-show="showAlert"也许您在组件重新渲染方面遇到一些问题