Какой лучший способ поделиться наблюдаемым свойством между различными компонентами в Vue?

Question

У меня есть это отслеживаемое свойство, называемое case:

cases: {
  handler: function () {
    let vc = this
    if (vc.areCasesValid()) {
      console.log('schema-cases#handler - casesValid', vc.cases)
      vc.setApiModelFromView()
      vc.$emit('valid', vc.apiModel)
      return true
    }
    else {
      console.log('template-heuristic-cases#handler - casesInvalid', vc.cases)
      vc.$emit('invalid')
      return false
    }
  },
  deep: true
},

Все этапы проверки в настоящее время находятся внутри функции areCasesValid, но я хочу улучшить удобство использования приложения, и этот процесс предполагает установку другой проверкишаги в разные компоненты.

С учетом этого, какой самый простой (не обязательно самый элегантный) способ наблюдать за различными изменениями, которые cases проходит в разных компонентах?

Answer 1

Если вы хотите сохранить простоту и не хотите использовать управление состоянием, например, vuex, вы можете использовать шину событий:

Ваша шина событий:

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

Ваш компоненткоторый генерирует событие:

<template>
  <div class="pleeease-click-me" @click="emitGlobalClickEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      // Send the event on a channel (i-got-clicked) with a payload (the click count.)
      EventBus.$emit('i-got-clicked', this.clickCount);
    }
  }
}
</script>

Ваш компонент, который получает событие:

// Import the EventBus.
import { EventBus } from './event-bus.js';

// Listen for the i-got-clicked event and its payload.
EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Полный пример и дополнительные пояснения можно найти здесь: https://alligator.io/vuejs/global-event-bus/