E
E
Evtera2021-12-12 19:32:35
Vue.js
Evtera, 2021-12-12 19:32:35

Why when using composable function inside watch store = undefined?

Hello. There is a component with composition api.

<script setup>
import { computed, ref, watch } from 'vue';
import { useStore } from 'vuex';
import useAvailableChestChampsData from '@/composables/useAvailableChestChampsData';

const championsWithChests = ref({});
const store = useStore();

const allChampionsAvatarsURLS = computed(() => store.getters['imagesStore/allChampionsAvatarsURLS']);
const foundedUser = computed(() => store.getters['currentUserStore/currentUserHeaderData']);

watch(() => foundedUser.value, (newUser) => {
  (async () => {
    const { availableChestChampsData } = await useAvailableChestChampsData(newUser.id);

    championsWithChests.value = availableChestChampsData.value;
  })();
});

</script>


In it, I use the composable function.

import { useStore } from 'vuex';
import { computed, ref } from 'vue';
import api from '@/api/api';

const useAvailableChestChampsData = async (userID) => {
  const store = useStore();
  console.log(store); // Почему store = undefined???
  const championMasteries = ref([]);
  try {
    const { data } = await api.user.allChampionMasteries(userID);
    championMasteries.value = data;
  } catch (e) {
    console.dir('Не удалось получить информацию о героях пользователя', e);
  }

  const allChampionsStore = computed(() => store.getters['handbookStore/allChampions']);

  const availableChestIdArr = computed(() => championMasteries.value.reduce((acc, champion) => {
    if (!champion.chestGranted) acc.push(champion.championId);
    return acc;
  }, []));

  const availableChestChampsData = computed(() => Object.values(allChampionsStore.value)
    .filter((champion) => availableChestIdArr.value.includes(Number(champion.key))));

  return {
    availableChestChampsData,
  };
};

export default useAvailableChestChampsData;


But for some reason, when the watch trigger and the useAvailableChestChampsData function fires, the store, which I declare inside it through useStore = undefined. That is, there is not even a vuex instance, let alone data.

Thanks in advance

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question