Make composable reactive

This commit is contained in:
Elia Bieri 2023-05-17 14:56:15 +02:00 committed by Daniel Egger
parent 8793b30b56
commit 1d97ec9dcf
1 changed files with 5 additions and 16 deletions

View File

@ -1,29 +1,18 @@
import { useCourseSessionsStore } from "@/stores/courseSessions"; import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { CourseSession } from "@/types";
import log from "loglevel"; import log from "loglevel";
import { computed } from "vue";
export function useCurrentCourseSession(): CourseSession { export function useCurrentCourseSession() {
/**
* We often need the current course session in our components.
* With this composable we can get it easily.
* ATTENTION: The value is not reactive! So the components need to be re-rendered
* when the value changes. This is currently done with the "switchedCourseSession"
* event handler in the App.vue component.
*/
const store = useCourseSessionsStore(); const store = useCourseSessionsStore();
const currentCourseSession = computed(() => store.currentCourseSession);
if (!currentCourseSession.value) { if (!store.currentCourseSession) {
log.error( log.error(
"currentCourseSession is only defined in pages with :courseSlug in the route" "currentCourseSession is only defined in pages with :courseSlug in the route"
); );
throw new Error( throw new Error(
`currentCourseSession is not defined in the store. `currentCourseSession is not defined in the store.
It is only defined in pages with :courseSlug in the route` It is only defined in pages with :courseSlug in the route`
); );
} else {
// return a NON-REACTIVE copy of the value (read above)
return currentCourseSession.value;
} }
return store.currentCourseSession;
} }