Vue - przeniesienie wartości pomiędzy komponentami

Question

Cześć, 

Mam problem z dostępem do danych po dodaniu router-linka. W komponencie Header ustawiam zmienną i ją emituję. Przy odświeżeniu strony w drugim komponencie pojawia się oczekiwana wartość, jednak gdy wchodzimy poprzez linki zmienna jest gubiona i nie mogę jej odebrać poprzez eventbusa.

 

Z komponentu Header emituje zmienna:

<template>
  <div>
    <header class="header">
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/first" >first Page</router-link></li>
          <li><router-link to="/second">second Page</router-link></li>
        </ul>
      </nav>
    </header>
  </div>
</template>

<script>
import EventBus from '../EventBus'

export default {
  name: 'Header',
  data () {
    return {
      token: ''
    }
  },
  methods: {
    setToken () {
      this.token = 1234
      EventBus.$emit('emittedEvent', this.token)
      console.log('Header emit', this.token)
    }
  },
  mounted () {
    console.log('mounted')
    this.setToken()
  }
}
</script>

 

Następnie w komponencie First odbieram:

<template>
  <div>
    First {{ getToken }}
  </div>
</template>

<script>
import EventBus from '../EventBus'
export default {
  name: 'First',
  data () {
    return {
      getToken: ''
    }
  },
  methods: {
    onUpdated (item) {
      this.getToken = item
      console.log('item', item)
    }
  },
  created () {
    EventBus.$on('emittedEvent', this.onUpdated)
  },
  beforeDestroy () {
    EventBus.$off('emittedEvent', this.onUpdated)
  }
}
</script>

 

Przy odświeżaniu strony wartość jest ustawiana, jeśli zaczniemy przechodzić po podstronach wartość jest gubiona. Domyślam się że mounted / created jest wykonywany tylko podczas pierwszego ładowania strony. Ale jak w takim razie mieć dostęp przez cały czas a nie tylko podczas pierwszego załadowania danych?

Answer 1

First.vue oczekuje na event, który wysyłany jest tylko raz, podczas tworzenia komponentu Header.

Kiedy przechodzisz między stronami, First jest niszczony i tworzony na nowo - jednak w tym czasie, nikt nie emituje żadnych eventów. Dlatego getToken pozostaje pusty.

Rozwiązań jest kilka

1. Dodać keep-alive na router-view:

<!-- App.vue -->
<keep-alive>
  <router-view/>
</keep-alive>

W ten sposób zapobiegniesz niszczeniu First.vue, dzięki czemu zachowa swój stan.

2. Emitować event za każdym razem, gdy zmienia się route:

// Header.vue
export default {
  ...
  watch: {
    $route () {
      EventBus.$emit('emittedEvent', this.token)
    }
  }
}

Dzięki temu, przy każdym tworzeniu First.vue, dostaje on token.

3.  Można bawić się w globalą zmienną odbieraną z headera, i przekazywaną jako props do router-view

Wszystkie wyżej wymienione metody są niewłaściwe. Zmniejszają czytelność kodu / są ciężko skalowalne / wpływają na zachowanie całej aplikacji.

Zachęcam do zapoznania się z vuexem.

Comments

Dzięki za odpowiedź i wskazanie kilku możliwych rozwiązań. Obecenie rozwiazalem problem przez propsy tak jak pisałeś w pkt 3. Vuex jednak wydaję się być rozsądnym wyjściem