Блог

Попытка создать файловую систему, аналогичную проводнику Windows, но с несколькими вкладками. Таким образом, приложение состоит из нескольких окон, которые состоят из нескольких вкладок. Изначально я планировал хранить все данные и их взаимосвязи в одном модуле хранилища, который работает с 2d-массивом (так как первый слой представляет окна, а второй-вкладки), но, проработав его, я понял, что обработка 2d-массива-очень сложная работа. Поэтому мне пришла в голову идея многоразового модуля, который регистрируется каждый раз при создании нового компонента «окно».

Вопрос в следующем: является ли это правильным шаблоном для обработки данных в Vue таким образом и есть ли какие-либо недостатки в использовании этого подхода? Или, может быть, есть лучшее решение для обработки данных? (извините, если мой английский плохой)

 <template>
  <div class="view">
    <tab-component v-model="model"></tab-component>
  </div>
</template>

<script>
import TabComponent from "@/components/TabComponent";

import tabs from "@/store/modules/files/_tabs";
import store from "@/store/index";

export default {
  components: { TabComponent },
  props: {
    index: {
      type: [String, Number],
      required: true,
    },
  },

  computed: {
    model: {
      get() {
        const { activeTab } = this.$store.state.files[`tabs_${this.index}`];
        return activeTab;
      },

      set(value) {
        const { $store, index } = this;
        $store.commit(`files/tabs_${index}/SET_ACTIVE_TAB`, value);
      },
    },
  },

  created() {
    const { index } = this;
    store.registerModule(["files", `tabs_${index}`], tabs);
  },

  beforeDestroy() {
    const { index } = this;
    store.unregisterModule(["files", `tabs_${index}`]);
  },
};
</script>