Make composable reactive
This commit is contained in:
parent
8793b30b56
commit
1d97ec9dcf
|
|
@ -1,20 +1,10 @@
|
||||||
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"
|
||||||
);
|
);
|
||||||
|
|
@ -22,8 +12,7 @@ export function useCurrentCourseSession(): CourseSession {
|
||||||
`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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue