Vue3中如何在Setup Store语法的Pinia Store中正确使用useRoute/useRouter？

问题原因 #

useRoute() 是Vue Router提供的注入式函数，必须在Vue的注入上下文（比如组件的setup函数、或被组件调用的函数）中执行才能获取到路由实例。你在Pinia Store的初始化代码中直接调用它时，还未进入Vue的注入上下文，所以会返回undefined。

两种可行解决方案 #

方案1：在组件上下文内初始化（简单直接） #

把路由参数的读取逻辑放到组件调用Store时执行，或者在Store内通过监听路由变化处理：

import { defineStore } from 'pinia';
import { useRoute } from 'vue-router';
import { useLocalStorage } from '@vueuse/core';
import { ref, watch } from 'vue';

export const useUserStore = defineStore('user', () => {
  const route = useRoute();
  // 先初始化localStorage，默认值设为null
  const uuid = useLocalStorage('uuid', null);

  // 如果localStorage里没有值，就从当前路由参数读取
  if (!uuid.value) {
    uuid.value = route.params.id;
  }

  // 可选：监听路由参数变化，实时更新uuid（如果业务需要）
  watch(
    () => route.params.id,
    (newId) => {
      if (newId) uuid.value = newId;
    },
    { immediate: true }
  )

  return { uuid };
})

这种方法的前提是Store只会在组件内部被调用（比如在组件的setup里用const store = useUserStore()），此时useRoute()能正确获取到上下文。

方案2：通过Pinia插件注入路由实例（适合全局调用场景） #

如果你的Store需要在组件外（比如main.js、工具函数）被调用，就需要通过Pinia插件把路由实例注入到Store中：

1. 在Pinia初始化时注册插件

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

// 初始化路由
const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */]
});

// 初始化Pinia并添加插件
const pinia = createPinia();
pinia.use(({ store }) => {
  // 把路由实例挂载到每个Store实例上
  store.router = router;
});

const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount('#app');

2. 在Setup Store中使用注入的路由实例

import { defineStore, getActivePinia } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  // 获取当前激活的Pinia实例，拿到注入的router
  const pinia = getActivePinia();
  const router = pinia?.router;

  // 从路由的当前状态中读取参数
  const uuid = ref(
    useLocalStorage('uuid', router?.currentRoute.value.params.id)
  )

  return { uuid };
})

这种方式不依赖Vue的注入上下文，即使在组件外调用Store也能正常获取路由参数。

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