Change subscribe element with variable svelte-CodePudding

I have a multiple Svelte stores that looks like this:

import { readable } from "svelte/store";

export const NatureStore = readable([
  {
    name: "nature",
    description:
      "Nature is what makes us all so we need to beautify it. This represent what we all need to survive in a civilization.",
    images: {
      src: [
        "...",
      ],
      description: [
        "...",
      ],
    },
  },
]);

All my stores have the same organization.

Now my main problem is that I need to subscribe to a specific store depending on a variable when the component is loaded. Like for example if my variable is var = 'nature' I want to subscribe to nature. I could do it with ifs and elses, but that won't be efficient at all. So I wonder if there's a way to do it in a better way.

For now I only subscribe to one store and it looks like that:

<script>
  import { NatureStore as nature } from "../../stores/nature";
  import { BlooperStore } from "../../stores/bloopers";
  import { NightStore } from "../../stores/night";
  import { PortraitStore } from "../../stores/portrait";
  import { PurpleStore } from "../../stores/purple";
  import { UrbanStore } from "../../stores/urban";
  import { UrbexStore } from "../../stores/urbex";

  import { onDestroy } from "svelte";

  //parameter passed with the router
  export let params;
  let category = params.category;

  let pictures = [];
  const unsubscribe = nature.subscribe((data) => {
    pictures = data;
  });

  onDestroy(() => unsubscribe());
</script>

But i want something like this :

<script>
  import { NatureStore as nature } from "../../stores/nature";
  import { BlooperStore } from "../../stores/bloopers";
  import { NightStore } from "../../stores/night";
  import { PortraitStore } from "../../stores/portrait";
  import { PurpleStore } from "../../stores/purple";
  import { UrbanStore } from "../../stores/urban";
  import { UrbexStore } from "../../stores/urbex";

  import { onDestroy } from "svelte";

  //parameter passed with the router
  export let params;
  let category = params.category;

  let pictures = [];
  //here setting the subscribe to the category variable
  const unsubscribe = category.subscribe((data) => {
    pictures = data;
  });

  onDestroy(() => unsubscribe());
</script>

If my explanations are not clear leave a comment I'll answer as quick as possible. Thanks for your help.

CodePudding user response：

You can create a mapping from category to store and just use that to find the correct one. The mapping could be extracted from the stores themselves or has to be created manually. As the store contents are an array, not an object, the former approach might not work.

One should not manually subscribe in Svelte files, just use $-syntax and reactive statements. That way you can't forget to unsubscribe and that happens automatically.

E.g.

<script>
  import { NatureStore } from "../../stores/nature";
  import { BlooperStore } from "../../stores/bloopers";
  import { NightStore } from "../../stores/night";
  import { PortraitStore } from "../../stores/portrait";
  import { PurpleStore } from "../../stores/purple";
  import { UrbanStore } from "../../stores/urban";
  import { UrbexStore } from "../../stores/urbex";

  export let params;

  $: category = params.category;

  const mapping = {
    nature: NatureStore,
    bloopers: BlooperStore,
    night: NightStore,
    portrait: PortraitStore,
    purple: PurpleStore,
    urban: UrbanStore,
    urbex: UrbexStore,
  }

  $: store = mapping[category];
  $: pictures = $store;
</script>