Vue路由切换时如何正确使用动态Pinia Store？

问题根源 #

你的代码在组件初始化阶段（setup执行时）创建了对应初始路由参数的Store实例，但路由切换时setup不会重新执行，导致Store实例无法跟随路由参数更新。

优化实现方案 #

1. 重构Store创建函数 #

首先修改makeStore，只返回defineStore定义的Store构造函数，而非直接创建实例：

// store.ts
import { defineStore } from "pinia";
import { ref } from "vue";

export default function makeStore(id: string) {
  // 返回Store构造函数，而非实例
  return defineStore(id, () => {
    const testString = ref("");
    return { testString };
  });
}

2. 组件内动态监听路由参数并更新Store #

在组件中通过监听路由参数变化，动态获取/创建对应ID的Store实例：

<script setup lang="ts">
import makeStore from "./store";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { watch, computed, ref } from "vue";

const route = useRoute();
// 响应式获取当前路由的widgetID
const currentWidgetId = computed(() => route.params.widgetID as string);

// 存储当前活跃的Store实例
const activeStore = ref();

// 监听widgetID变化，同步更新Store
watch(currentWidgetId, (newId) => {
  // 获取对应ID的Store构造函数
  const WidgetStore = makeStore(newId);
  // Pinia会自动复用同ID的Store实例，无需担心重复创建
  activeStore.value = WidgetStore();
}, { immediate: true }); // 立即执行一次，初始化首次加载的Store

// 将Store的状态转为响应式ref，供模板使用
const { testString } = storeToRefs(activeStore.value);
</script>

<template>
  <!-- 直接使用响应式的testString即可 -->
  <input v-model="testString" placeholder="输入测试内容" />
</template>

核心原理 #

• Pinia的defineStore返回的构造函数，多次调用会返回同一个实例（基于ID唯一标识），避免重复创建Store
• 通过watch监听路由参数变化，在参数更新时重新获取对应ID的Store实例，确保组件始终使用当前路由对应的Store
• 使用storeToRefs将Store的状态转为响应式ref，保证模板中的数据能实时更新

额外注意事项 #

• 如果widgetID可能为空值，建议在watch回调中添加空值判断，避免创建无效ID的Store
• 若组件使用了keep-alive，默认情况下路由参数变化会触发监听，无需额外配置

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