Всем привет. Есть компонент с 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>
В нём я использую composable функцию.
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;
Но почему-то, при тригере watch и срабатывании useAvailableChestChampsData функции, store, который я объявляю внутри неё через useStore = undefined. То есть нет даже экземпляра vuex, не говоря уже о данных.
Заранее спасибо