Каким образом можно элегантно осуществить инъекцию/предоставление?

  • 11 сентября 2023 г. 8:47
Ответы на вопрос 2
Если вы хотите осуществить инъекцию/предоставление данных с помощью классов, вам может понадобиться использовать 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 для управления любыми общими данными в вашем приложении и разделить логику хранения и получения данных от представления компонентов.
Красота объекта не зависит от его свойств, она воспринимается субъектом. Рассмотрите другие критерии, например, работоспособность, масштабируемость, читаемость. Использование инструмента Inject/provide вместе с compositionApi мне кажется очень эстетичным. Проблема заключается, на мой взгляд, в сложности предвидеть иерархию компонентов, макетов и маршрутов вовремя. Это приводит к проблемам с шинами и хранилищами данных, даже в задачах, которые иногда можно было бы решить без них.
Похожие вопросы