Передать значение всем маршрутам с помощью router-view

Question

У меня есть данные currency и i wi sh для передачи этих данных во все представления вместо вызова одной и той же функции в каждом представлении.

Поэтому я решил вызвать свою функцию в App.vue (my main view) но не могу понять, как передать его вместе с router-view

Код

HTML

<template>
  <el-container :is="layout">
    <transition name="fade">
      <router-view id="content" :key="$route.fullPath"></router-view>
    </transition>
  </el-container>
</template>

Script

export default {
    data() {
      return {
        isCollapse: true,
        user: '',
        type: '',
        site_name: process.env.MIX_APP_NAME
      }
    },
    created () {
      this.getCurrency()
    },
    methods: {
      getCurrency() {
        axios
        .get('/api/currencyDefault')
        .then(response => {
          this.currency = response.data.data
        })
        .catch(function (error) {
          console.log('error', error);
        });
      },
    }
}

Есть идеи?

Answer 1

Вы можете передать эту валюту в представление маршрутизатора, сделав это следующим образом:

    <template>
      <el-container :is="layout">
        <transition name="fade">
           <router-view :currency="currency"id="content" :key="$route.fullPath"></router-view>
        </transition>
      </el-container>
    </template>

export default {
    data() {
      return {
        isCollapse: true,
        user: '',
        type: '',
        site_name: process.env.MIX_APP_NAME
      }
    },
    created () {
      this.getCurrency()
    },
    methods: {
      getCurrency() {
        axios
        .get('/api/currencyDefault')
        .then(response => {
          this.currency = response.data.data
        })
        .catch(function (error) {
          console.log('error', error);
        });
      },
    }
}

Теперь в другом представлении вы можете получить к нему доступ через реквизиты, например

export default {
    props:['currency']
}

, но проблема с этим подходом в том, что, когда у вас есть более глубокий дочерний компонент, и вы все еще хотите получить доступ к данным валюты, вам придется снова передавать реквизиты в другое представление маршрутизатора, что скорее приведет к тому, что вам придется нелегко справиться с этим , Я предлагаю использовать Vuex для этого. Поскольку эта валюта доступна для всех ваших просмотров.

см. Документы здесь vuex

Answer 2

Вы можете передать реквизиты в представление маршрутизатора, и они будут переданы дочернему компоненту. Этот стекопоток отвечает на ваш вопрос -> Как передать данные в представление маршрутизатора в Vue. js

<router-view :currency="currency"></router-view>

Одна проблема, которую я заметил, вы установили this.currency в ваш вызов API, который перезапишет метод, который вы вызвали, то же самое. Возможно, измените имя вашего метода на getCurrency.

methods: {
  getCurrency () {
    axios
    .get('/api/currencyDefault')
    .then(response => {
      this.currency = response.data.data
    })
    .catch(function (error) {
      console.log('error', error);
    });
  },
}