My store and state is updating correctly. I'm using Ionic with vue.js composition with Pinia.
When I make a selection on a previous route to select a new image the image is updated correctly in pinia, but the image is not reactive in the next route. It comes back as undefined even though pinia is updated I just get a blank image. The image paths are correct, I just can't get reactivity.
How Can I get reactivity for images that change in the store using vue.js composition?
the else statement is true console.warn('Image data is undefined or missing name.');
Code
<template><ion-page><mm-header pageTitle="Select Color"><template v-slot:select-button><a href="#" @click.prevent="selectAndSave">Select</a></template></mm-header><ion-content :fullscreen="true"><div :class="`bg-${themeColor}-500 h-full`"><img :src="mmImage" alt="Image" v-if="mmImage" class="w-full" /></div></ion-content></ion-page></template><script setup lang="ts">import { useRouter } from 'vue-router';import { ref, computed } from 'vue';import { onIonViewDidEnter } from '@ionic/vue';import { useMantraStore } from '@/stores/MantraStore';import { IonPage, IonContent } from '@ionic/vue';const router = useRouter();const mantraStore = useMantraStore();const themeColor = computed(() => mantraStore.myMantra.color);const mmImage = ref('');onIonViewDidEnter(() => { console.log('Home page did enter'); if (mantraStore.myMantra.image && mantraStore.myMantra.image.name) { console.log('Image name:', mantraStore.myMantra.image.name); mmImage.value = new URL(`/src/assets/images/mantra-images/portrait/${mantraStore.myMantra.image.name}`, import.meta.url).href; console.log('Image path:', mmImage.value); } else { console.warn('Image data is undefined or missing name.'); }});const selectAndSave = () => { router.push('/select/photo');};</script>Data
state: () => ({ myImage: { color:'yellow', image:{ id:0, name:'0-1440x3200.gif', alt:'Happy faces' } }}),