嘿！您知道如何在不存储的情况下在Nuxt中动态更改布局吗？

Question

这是我的默认布局。当我的模式打开时，我想更改标题上的可见性，但是我不知道如何动态更改它。有什么想法吗？

// default.vue

<template>
  <div class="container">
    <header class="default-header">
      <router-link class="logo" to="/"></router-link>

      <div class="button-group">
        <router-link to="/login" class="btn">Log in</router-link>
        <router-link to="/register" class="btn">Sign up</router-link>
      </div>
    </header>

    <nuxt />
  </div>
</template>

// index.vue

<template>
  <div>
    <div @click="openModal">Open Modal</div>
    <modal-popup v-model="showModal"></modal-popup>
  </div>
</template>

<script>
import ModalPopup from "~/components/ModalPopup";
export default {
  name: "Login",
  components: {
    ModalPopup
  },
  data() {
    return {
      showModal: false;
    }
  },
  methods() {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
  }
};
</script>

Answer 1

要在没有商店的情况下进行操作，您可以创建一个EventBus来触发您可以收听的事件。事件总线提供vue组件之间的通信。

您可以创建一个eventbus js文件。

import Vue from 'vue';
const EventBus = new Vue();

export default EventBus;

然后可以在组件中导入它

import EventBus from '/eventbus'

在openModal（）函数的index.vue组件中，您可以更改它以触发打开模式事件，如下所示：>

openModal() {
     EventBus.$emit('modal-opened', true);
     this.showModal = true;
}
然后在default.vue组件中，您可以在已安装的函数中添加侦听器

mounted() {
    EventBus.$on(‘modal-open’, function (payLoad) {
      // Change header visibility here
    });
}
额外说明

[如果您不想一直导入Eventbus，可以在app.js中导入Eventbus，并且在new Vue()之前可以将bus添加到vue属性，以便文件看起来像]

import Vue from 'vue'
import EventBus from '/eventbus'

Object.defineProperties(
   Vue.prototype,
   {
      $bus: {
          get() => { return EventBus; }
      }
   }
)

new Vue({})
然后，您可以像这样访问组件中的总线

this.$bus.$emit('modal-open', true);
和

this.$bus.$on('modal-open', function(payload) {

})
希望有所帮助