Как повторно использовать компонент, который должен использовать уникальный экземпляр магазина vuex - PullRequest
Новая
       44

Как повторно использовать компонент, который должен использовать уникальный экземпляр магазина vuex

1 голос
/ 05 ноября 2019

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

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

Родительский компонент:(проп «req-path» используется для передачи разных URL-адресов, чтобы каждый компонент FileExplorer совершал действие по извлечению данных из API с этим URL-путем) 

<template>
  <div class="container">
    <FileExplorer req-path="/folder/subfolder"></FileExplorer>
    <FileExplorer req-path="/anotherfolder"></FileExplorer>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import FileExplorer from "@/components/FileExplorer.vue";

export default {
  components: {
    FileExplorer
  }
};
</script>

Повторно используемый компонент: 

<template>
 <div class="container">
      <ul v-for="(item, index) in folderIndex" :key="index">
        <li>Results: {{ item.name }}</li>
      </ul>
    </div>
 </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  props: ["reqPath"],
  },
  computed: {
    ...mapState("fileExplorer", ["folderIndex"])
  },
  created() {
    // FETCH DATA FROM API
    this.$store
      .dispatch("fileExplorer/indexingData", {
        reqPath: this.reqPath
      })
      .catch(error => {
        console.log("An error occurred:", error);
        this.errors = error.response.data.data;
      });
  }
};
</script>

store.js, где я вызываю свой модуль хранилища, который я разделяю в разных файлах, здесь нас интересует только модуль fileExplorer. РЕДАКТИРОВАТЬ: Я упростил файл для ясности цели, но у меня есть некоторые другие состояния и много мутаций внутри. компонент для отображения разных данных из этих двух разных URL, вместо этого я получаю одни и те же данные в экземпляре двух компонентов (что не удивительно).

Большое спасибо всем, кто все это читает!

1 Ответ

0 голосов
/ 06 ноября 2019

Повторное использование модулей - это когда вы создаете несколько модулей из одной и той же конфигурации модуля.

Сначала используйте функцию для объявления состояния модуля вместо простого объекта.

Если мы используем простой объект для объявления состояния модуля, то этот объект состояния будет использоваться по ссылке и вызывать перекрестное хранилище / загрязнение состояния модуля при его мутировании. 

const fileExplorer = {
  state () {
    return {
      folderIndex: {}
    }
  },
  // mutations, actions, getters...
}

Тогдадинамически регистрирует новый модуль каждый раз, когда создается новый компонент FileExplorer, и отменяет регистрацию этого модуля до его уничтожения. 

<template>
 <div class="container">
      <ul v-for="(item, index) in folderIndex" :key="index">
        <li>Results: {{ item.name }}</li>
      </ul>
    </div>
 </div>
</template>

<script>
import { fileExplorer } from "@/store/modules/fileExplorer";
import store from "@/store/index";

var uid = 1

export default {
  props: ["reqPath"],
  data() {
    return {
      namespace: `fileExplorer${uid++}`
    }
  },
  computed: {
    folderIndex() {
      return this.$store.state[this.namespace].folderIndex
    }
  },
  created() {
    // Register the new module dynamically
    store.registerModule(this.namespace, fileExplorer);

    // FETCH DATA FROM API
    this.$store
      .dispatch(`${this.namespace}/indexingData`, {
        reqPath: this.reqPath
      })
      .catch(error => {
        console.log("An error occurred:", error);
        this.errors = error.response.data.data;
      });
  },
  beforeDestroy() {
    // Unregister the dynamically created module
    store.unregisterModule(this.namespace);
  }
};
</script>

Вы больше не являетесьнужна регистрация статического модуля, заявленная при создании магазина. 

export default new Vuex.Store({
  modules: {
    // fileExplorer, <-- Remove this static module
  }
})
...