通过 Boolean 道具导致道具无效：道具“值”的类型检查失败

Question

我正在尝试将 Vuex 存储中的 boolean 值作为道具传递到组件中，以控制警报的可见性。 我将道具传递给警报value属性。

结果是错误：

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Boolean, got String with value "globalAlert.alert".

我已经调整了如何以几种不同的方式将其传递给组件，删除了括号等。但它似乎将我的 globalAlert 作为文字字符串，即使我已经验证 Vuex getter 正确地返回了globalAlert错误.

执行

本店控制全局警报 state

const state = {
    globalAlert: {
        alert: false,
        alertTitle: "",
        alertMessage: ""
    }
}

const getters = {
    getGlobalAlert: state => state.globalAlert
}

const actions = {
    setGlobalAlert({ commit }, error) {
        commit('setAlert', error)
    }
}

const mutations = {
    setAlert: (state, globalAlert) => (state.globalAlert = globalAlert)
}

export default {
    state,
    getters,
    actions,
    mutations
}

这是带有globalAlert的警报组件

<template>
  <div id="app">
    <v-app id="inspire">
      <div>
        <v-alert
          value="globalAlert.alert"
          dismissible
          color="red"
          transition="slide-y-transition"
          dark
          dense
          border="left"
          elevation="2"
          class="ma-5"
          icon="error"
        >
          Something bad just happened
        </v-alert>

        <div class="text-center">
          <v-btn v-if="!alert" dark @click="alert = true">Reset Alert</v-btn>
        </div>
      </div>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "GlobalAlert",
  props: {
    globalAlert: {}
  }
};
</script>

这是组件的用法，这里从 store 中拉出 globalAlert 并向下发送到组件

...
<GlobalAlert 
    :globalAlert="globalAlert">
</GlobalAlert>
...
import { mapGetters, mapActions } from "vuex";
import GlobalAlert from "../components/GlobalAlert";
...
components: {GlobalAlert},
computed: {
    ...mapGetters(["isAuthenticated", "userDetails", "getGlobalError"]),
    globalAlert(){
        return this.$store.state.error.globalAlert; 
    }
}