Vue3+Pinia收藏夹页面初始加载不显示数据问题排查

我正在开发基于Vue 3、Vuetify的食谱管理应用，使用Vue Router和Pinia做状态管理。应用分搜索（API查询食谱）和收藏夹两个模块，各有独立路由和视图，用户可将食谱加入收藏夹。

在HomeView.vue里订阅Pinia状态，把收藏食谱存到localStorage：

const store = useRecipesStore();

store.$subscribe((mutation, state) => {
   localStorage.setItem('favoriteRecipes', JSON.stringify(state.favoriteRecipes));
});

FavoritesView.vue尝试展示收藏食谱：

<template>
    <Recipes :recipes="recipes" />
</template>

<script setup>
    import { onMounted } from 'vue';
    import { useRecipesStore } from '@/stores/recipesStore.js';

    const store = useRecipesStore();

    const recipes = store.getFavoriteRecipes;

    onMounted(() => {
        const savedRecipes = localStorage.getItem('favoriteRecipes') 
            ? JSON.parse(localStorage.getItem('favoriteRecipes')) 
            : [];

        store.setFavoriteRecipes(savedRecipes);
    });
</script>

已确认数据能存入localStorage，也能填充到Pinia store里。

Pinia store代码：

import { defineStore } from 'pinia';

export const useRecipesStore = defineStore('recipesStore', {
    state: () => ({
        recipes: [],
        favoriteRecipes: [],
        activeRecipe: null,
    }),
    getters: {
        getRecipes() {
            return this.recipes;
        },
        getFavoriteRecipes() {
            return this.favoriteRecipes;
        },
        canBeAddedToFavorites() {
            if (!this.activeRecipe) return false;

            return !this.favoriteRecipes.some(recipe => recipe.id === this.activeRecipe.id);
        },
    },
    actions: {
        addFavoriteRecipe(recipe) {
            this.$patch({
                favoriteRecipes: [...this.favoriteRecipes, recipe]
            });
        },
        setActiveRecipe(recipe) {
            this.$patch({
                activeRecipe: recipe
            });
        },
        setFavoriteRecipes(recipes) {
            this.$patch({
                favoriteRecipes: recipes
            });
        },
    },
});

奇怪的是，收藏夹页面初始加载时不显示数据，但访问首页再切换回来就能正常显示。请问问题出在哪里？

核心问题在于初始加载FavoritesView时，recipes变量没有响应式跟踪Pinia getter的更新：

1. 页面初始化时，const recipes = store.getFavoriteRecipes直接获取了store中favoriteRecipes的初始空数组值，这个赋值是一次性的，未建立响应式绑定。
2. onMounted里调用setFavoriteRecipes更新store状态后，recipes变量不会自动更新，因为它只是普通常量，没有监听getter变化。
3. 切换到首页再返回时，FavoritesView重新挂载，此时store已加载localStorage数据，recipes能拿到正确值。

方式1：用computed包裹getter建立响应式绑定 #

修改FavoritesView.vue的script部分：

<script setup>
    import { onMounted, computed } from 'vue';
    import { useRecipesStore } from '@/stores/recipesStore.js';

    const store = useRecipesStore();

    // 用computed包裹getter，实现响应式跟踪
    const recipes = computed(() => store.getFavoriteRecipes);

    onMounted(() => {
        const savedRecipes = localStorage.getItem('favoriteRecipes') 
            ? JSON.parse(localStorage.getItem('favoriteRecipes')) 
            : [];

        store.setFavoriteRecipes(savedRecipes);
    });
</script>

方式2：模板直接调用store getter（更简洁） #

无需在script定义recipes变量，模板直接使用getter：

<template>
    <Recipes :recipes="store.getFavoriteRecipes" />
</template>

<script setup>
    import { onMounted } from 'vue';
    import { useRecipesStore } from '@/stores/recipesStore.js';

    const store = useRecipesStore();

    onMounted(() => {
        const savedRecipes = localStorage.getItem('favoriteRecipes') 
            ? JSON.parse(localStorage.getItem('favoriteRecipes')) 
            : [];

        store.setFavoriteRecipes(savedRecipes);
    });
</script>

额外优化：把localStorage初始化移到Pinia store #

避免每个视图重复处理加载逻辑，直接在store初始化时读取localStorage：

import { defineStore } from 'pinia';

export const useRecipesStore = defineStore('recipesStore', {
    state: () => ({
        recipes: [],
        // 初始化时直接读取localStorage数据
        favoriteRecipes: JSON.parse(localStorage.getItem('favoriteRecipes')) || [],
        activeRecipe: null,
    }),
    // 其余getters和actions保持不变
});

这样FavoritesView无需在onMounted中加载数据，简化代码的同时保证store初始化就有数据，避免空状态问题。

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