optimized track store usage

src/components/track/MediaTrack.vue

@@ -789,7 +789,7 @@ import MessageOverlay from '@/components/MessageOverlay.vue';
 import { Subscription } from 'sub-events';
 import { PlaybackState } from '@/code/media/PlaybackState';
 import useLog from '@/composables/LogComposable';
-import { createTrackStore } from '@/store/track/index';
+import { useTrackStore } from '@/store/track/index';
 import MeterDisplay from '@/components/displays/MeterDisplay.vue';
 import ArtistDisplay from '@/components/displays/ArtistDisplay.vue';
 
@@ -851,7 +851,7 @@ const {
  * @remarks Code inside the setup script runs once per component instance,
  * thus the track store must be destroyed after component unload.
  */
-const trackStore = createTrackStore(props.trackId);
+const trackStore = useTrackStore(props.trackId);
 const {
     isActiveTrack,
     mediaHandler,

src/components/track/NoticeTrack.vue

@@ -23,7 +23,7 @@ import { storeToRefs } from 'pinia';
 import { useAppStore } from '@/store/app';
 import CloseButton from '../buttons/CloseButton.vue';
 import type { ITrack } from '@/store/ITrack';
-import { createTrackStore } from '@/store/track/index';
+import { useTrackStore } from '@/store/track/index';
 
 const props = defineProps({
     /** The track to display
@@ -46,7 +46,7 @@ const { mediaUrls } = storeToRefs(app);
  * @remarks Code inside the setup script runs once per component instance,
  * thus the track store must be destroyed after component unload.
  */
-const trackStore = createTrackStore(props.track.Id);
+const trackStore = useTrackStore(props.track.Id);
 const { mediaUrl } = storeToRefs(trackStore);
 
 onUnmounted(() => {

src/components/track/PdfTrack.vue

@@ -220,7 +220,7 @@ import { confirm } from '@/code/ui/dialogs';
 import TagInput from '@/components/editor/TagInput.vue';
 import TagsDisplay from '@/components/displays/TagsDisplay.vue';
 import { PlaybackState } from '@/code/media/PlaybackState';
-import { createTrackStore } from '@/store/track/index';
+import { useTrackStore } from '@/store/track/index';
 
 const props = defineProps({
     /** The track to display
@@ -243,7 +243,7 @@ const { showPdfInline } = storeToRefs(settings);
  * @remarks Code inside the setup script runs once per component instance,
  * thus the track store must be destroyed after component unload.
  */
-const trackStore = createTrackStore(props.track.Id);
+const trackStore = useTrackStore(props.track.Id);
 const { mediaUrl } = storeToRefs(trackStore);
 
 onUnmounted(() => {

src/components/track/TrackHeader.vue

@@ -262,7 +262,7 @@ import BaseIcon from '@/components/icons/BaseIcon.vue';
 import { playbackStateInjectionKey } from './TrackInjectionKeys';
 import { useSettingsStore } from '@/store/settings';
 import { storeToRefs } from 'pinia';
-import { createTrackStore } from '@/store/track/index';
+import { useTrackStore } from '@/store/track/index';
 import { PlaybackState } from '@/code/media/PlaybackState';
 import FileHandler from '@/store/filehandler';
 
@@ -302,11 +302,8 @@ const props = defineProps({
 
 // --- tracking the associated ITrack
 
-/** The dynamic track store for this component.
- * @remarks Code inside the setup script runs once per component instance,
- * thus the track store must be destroyed after component unload.
- */
-const trackStore = createTrackStore(props.trackId);
+/** The dynamic track store for this component. */
+const trackStore = useTrackStore(props.trackId);
 const {
     useMeasureNumbers,
     track,
@@ -320,10 +317,6 @@ const {
     preRollDuration,
 } = storeToRefs(trackStore);
 
-onUnmounted(() => {
-    trackStore.$dispose();
-});
-
 const app = useAppStore();
 
 const { isTrackEditable } = storeToRefs(app);

src/components/track/TrackTitle.vue

@@ -10,7 +10,6 @@
             }"
             :name="name"
         >
-
         </TrackTitleName>
 
         <!-- <span
@@ -29,19 +28,13 @@
             </i>
         </span> -->
 
-        <span
-            v-if="artist || album || meter"
-            class='is-hidden-mobile'
-        >
+        <span v-if="artist || album || meter" class="is-hidden-mobile">
             <ArtistDisplay
                 class="mr-2 is-size-7"
                 :artist="artist"
                 :album="album"
             />
-            <MeterDisplay
-                class="mr-2 is-size-7"
-                :meter="meter"
-            ></MeterDisplay>
+            <MeterDisplay class="mr-2 is-size-7" :meter="meter"></MeterDisplay>
         </span>
 
         <TagsDisplay
@@ -54,17 +47,14 @@
     </div>
 </template>
 
-<script
-    setup
-    lang="ts"
->
+<script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { computed, onUnmounted } from 'vue';
 import TrackTitleName from '@/components/track/TrackTitleName.vue';
 import MeterDisplay from '@/components/displays/MeterDisplay.vue';
 import ArtistDisplay from '@/components/displays/ArtistDisplay.vue';
 import TagsDisplay from '@/components/displays/TagsDisplay.vue';
-import { createTrackStore } from '@/store/track/index';
+import { useTrackStore } from '@/store/track/index';
 import NavButton from '@/components/buttons/NavButton.vue';
 import { mdiDotsVertical } from '@mdi/js';
 
@@ -104,11 +94,8 @@ const props = defineProps({
 
 // --- tracking the associated ITrack
 
-/** The dynamic track store for this component.
- * @remarks Code inside the setup script runs once per component instance,
- * thus the track store must be destroyed after component unload.
- */
-const trackStore = createTrackStore(props.trackId);
+/** The dynamic track store for this component. */
+const trackStore = useTrackStore(props.trackId);
 const {
     isActiveTrack,
     meter,
@@ -119,10 +106,6 @@ const {
     album,
 } = storeToRefs(trackStore);
 
-onUnmounted(() => {
-    trackStore.$dispose();
-});
-
 // const tooltipText = computed(() => {
 //     const artistLabel = artist.value ? "by " + artist.value + " " : "";
 //     const albumLabel = album.value ? "on " + album.value + " " : "";

src/store/index.ts

@@ -27,4 +27,6 @@ export enum Store {
     Audio = 'AUDIO',
     /** A store for multitrack audio-related global state */
     Multitrack = 'MULTITRACK',
+    /** A store for track-related state, for a single track */
+    Track = 'TRACK',
 }

src/store/track/index.ts

@@ -20,10 +20,12 @@ import CompilationHandler from '../compilation-handler';
 import FileHandler from '../filehandler';
 import { Meter } from '@/code/music/Meter';
 import { useSettingsStore } from '../settings';
+import { Store } from '..';
 
-// export factory function
-export function createTrackStore(trackId: string) {
-    return defineStore(`tracks/${trackId}`, () => {
+/** A factory function for a single track store */
+export function useTrackStore(trackId: string) {
+    /** A dynamic store for holding data for a single track */
+    return defineStore(`${Store.Track}/${trackId}`, () => {
         const app = useAppStore();
         const settings = useSettingsStore();
         const audio = useAudioStore();