使用Pinia+Vue3组合式API时图片无法响应更新的问题

问题描述 #

在Ionic+Vue3组合式API项目中使用Pinia，store状态更新正常。前置路由选择新图片后，Pinia中的图片数据已更新，但切换回目标路由后图片显示空白，触发「Image data is undefined or missing name.」警告，图片路径无误，需实现图片的响应式更新。

原代码 #

<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>

Pinia Store状态结构 #

state: () => ({ 
    myMantra: {
        color:'yellow',
        image:{
            id:0,
            name:'0-1440x3200.gif',
            alt:'Happy faces'
        }
    }
}),

核心原因 #

原代码中mmImage是独立的ref变量，仅在onIonViewDidEnter钩子（页面进入时）赋值一次，后续Pinia中myMantra.image更新时，mmImage不会自动同步，导致页面无法感知状态变化，显示空白。

解决方案 #

方案1：用计算属性实现自动响应（推荐） #

将mmImage改为computed计算属性，直接依赖Pinia中的myMantra.image，当Pinia状态更新时，计算属性会自动重新计算图片路径：

<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 { computed } from 'vue';
import { useMantraStore } from '@/stores/MantraStore';
import { IonPage, IonContent } from '@ionic/vue';

const router = useRouter();
const mantraStore = useMantraStore();
const themeColor = computed(() => mantraStore.myMantra.color);

// 计算属性自动响应Pinia状态变化
const mmImage = computed(() => {
    const image = mantraStore.myMantra.image;
    if (image && image.name) {
        return new URL(`/src/assets/images/mantra-images/portrait/${image.name}`, import.meta.url).href;
    }
    console.warn('Image data is undefined or missing name.');
    return '';
});

const selectAndSave = () => {
    router.push('/select/photo');
};
</script>

方案2：监听Pinia状态变化（适合需额外逻辑场景） #

保留mmImage为ref，通过watch监听Pinia中myMantra.image的变化，触发路径更新，适合需要在状态变化时执行日志、异步操作等额外逻辑的场景：

<template>
    <!-- 模板部分与原代码一致 -->
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, computed, watch } 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('');

// 页面进入时初始化
const updateImagePath = () => {
    const image = mantraStore.myMantra.image;
    if (image && image.name) {
        mmImage.value = new URL(`/src/assets/images/mantra-images/portrait/${image.name}`, import.meta.url).href;
    } else {
        console.warn('Image data is undefined or missing name.');
        mmImage.value = '';
    }
};

onIonViewDidEnter(updateImagePath);

// 监听图片数据变化，开启deep监听对象内部属性
watch(
    () => mantraStore.myMantra.image,
    updateImagePath,
    { deep: true }
);

const selectAndSave = () => {
    router.push('/select/photo');
};
</script>

内容的提问来源于stack exchange，提问作者ottz0