Если вы хотите осуществить инъекцию/предоставление данных с помощью классов, вам может понадобиться использовать Vuex - библиотеку управления состоянием для Vue.js.
Вам нужно будет создать хранилище состояний с помощью Vuex.Store и обеспечить доступ к нему в вашем приложении. Вы можете определить геттеры, с помощью которых ваши компоненты будут получать данные из хранилища, и мутации, с помощью которых они будут изменять данные хранилища.
Вот пример, как это может выглядеть:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
settings: null
},
mutations: {
setSettings(state, settings) {
state.settings = settings;
}
},
actions: {
fetchSettings({ commit }) {
// ваш код для получения данных с API и вызова мутации setSettings
}
}
});
export default store;
// App.vue
<template>
<div>
<Catalog />
<OtherComponent />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
components: {
Catalog,
OtherComponent
},
computed: {
...mapGetters(['settings'])
},
created() {
this.$store.dispatch('fetchSettings');
}
};
</script>
Теперь вы можете получить доступ к настройкам из ваших компонентов с помощью геттеров и изменять их с помощью вызовов мутаций:
// Catalog.vue
<template>
<div>
<p>{{ settings }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['settings'])
}
};
</script>
Вы можете использовать Vuex для управления любыми общими данными в вашем приложении и разделить логику хранения и получения данных от представления компонентов.