Javascript 如何将数据传递到已经在default.vue中声明的组件，并从其他页面调用？

目前，我有一个名为Alert的组件，其中包含引导警报元素

<template>
  <div>
    <b-alert :show="alertState" dismissible :variant="variant">
      {{message}}
    </b-alert>
  </div>
</template>

<script>
  export default {
    props: {
      message: { type: String },
      variant: { type: String }, 
      state: { type: String, default: 'hidden' }
    }, 
    computed: {
      alertState() {
        return this.state == 'show' ? true : false
      }
    }
  }
</script>

---

在

.vue

和

.vue

之间共享数据的最佳方法是使用Vuex存储。您可以使用它来获得全局警报状态

见文件：

---

1/创建存储 2/源存储成功/错误

//您的项目/pages/.vue
异步数据（{store}）{
post（url，{name:'Hello'}）
.然后（功能（响应）{
log（`success${response}`）；
//在警报组件中显示消息成功
commit（'SET_ALERT'，{message:“POST done！”，变量：“success”}）；
})
.catch（函数（错误）{
log（`failed${error}`）；
//在警报组件中显示消息失败
commit（'SET_ALERT'，{message:'Error on POST！'，variant:'Error}）；
});
// ...
}

3/从布局中读取存储

//您的项目/layout/default.vue
//...

这取决于

default.vue

和

new.vue

之间的关系，如果它们是父级/子级，则应该从子级发送事件，然后从父级传递道具。如果关系更复杂，我建议您使用类似于

vuex

的东西。谢谢Nicolas，我在index.vue中提交SET_警报时能够显示警报。但当我在其他页面（如new.vue或_id.vue）中触发它时，我得到一个错误failed TypeError:无法读取未定义的属性“$store”。顺便说一句，我的vue x文件在store/index.jsI下面。jsI正在从我的new.vue触发提交，如下所示：this.$store.commit（'SET_ALERT'，{variant:'success'，message:'Insider details have updated'}）；好的，我知道我已经在我需要的页面上手动导入了。从~/store/index'导入{store}；但这是正确的方法吗？感谢Nicolas

$store

是为

或

在
+
异步数据（{store}）{…}
或
上的
存储
方法：{…}
。但是我从来没有用
import
打电话给我的商店。见示例：
<template>
 <div>
    <Alert state="show" variant="success" message="Hello World"/>
 </div>
</template>

<script>
import Alert from '~/components/UI/Alert';
export default {
  components: {
    Alert
  }
}
</script>

axios.post(url, { name: 'Hello' })
  .then(function (response) {
          console.log(`success ${response}`);
          // show success with message in Alert component
        })
        .catch(function (error) {
          console.log(`failed ${error}`);
          // show failed with message in Alert component
        });

// your-project/store/index.js

export const state = () => ({
  alert: null
});

export const mutations = {
  SET_ALERT (state, value) {
    console.log('SET_ALERT', value);
    state.alert = value;
  }
};

// your-project/pages/<page>.vue

asyncData ({ store }) {

  axios.post(url, { name: 'Hello' })
    .then(function (response) {
      console.log(`success ${response}`);
      // show success with message in Alert component
      store.commit('SET_ALERT', { message: "POST done!", variant: "success" });
    })
    .catch(function (error) {
      console.log(`failed ${error}`);
      // show failed with message in Alert component
      store.commit('SET_ALERT', { message: "Error on POST!", variant: "error" });
    });

  // ...
}

// your-project/layout/default.vue

<template>
 <div>
    <Alert state="show" :variant="$store.state.alert.variant" :message="$store.state.alert.message"/>
 </div>
</template>

//...