在Composable中正确使用Pinia、Vue Router的方式辨析及实例疑问

两种实现方式没有绝对的“正确”，各有适用场景，下面分别拆解：

1. 将Router/Store作为参数传入Composable #

这种方式的核心是解耦，把依赖从Composable内部剥离出去：

• 优势：
  • 单元测试友好：可以轻松传入Mock的Router或Store实例，不需要依赖全局Vue环境就能完成测试
  • 复用性更强：Composable不绑定全局上下文，甚至能在非Vue组件的脚本逻辑中调用
• 劣势：每次调用都要手动传入实例，代码会多几行

示例代码：

// composables/useUserActions.js
export function useUserActions(router, userStore) {
  const login = () => {
    userStore.setUserInfo({ name: 'demo' })
    router.push('/dashboard')
  }

  return { login }
}

// 组件中使用
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useUserActions } from '@/composables/useUserActions'

const router = useRouter()
const userStore = useUserStore()
const { login } = useUserActions(router, userStore)

2. 在Composable内部直接调用全局实例 #

这是Vue生态里更常规的写法，依赖Vue的依赖注入机制：

• 优势：
  • 代码更简洁：组件调用Composable时不需要传参，直接用就行
  • 符合社区惯例：大部分官方示例、开源项目都采用这种方式，学习成本低
• 劣势：
  • 测试时需要提前在测试环境挂载Router/Pinia实例
  • Composable和全局上下文绑定，无法在非Vue环境直接调用

示例代码：

// composables/useUserActions.js
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

export function useUserActions() {
  const router = useRouter()
  const userStore = useUserStore()

  const login = () => {
    userStore.setUserInfo({ name: 'demo' })
    router.push('/dashboard')
  }

  return { login }
}

// 组件中使用
import { useUserActions } from '@/composables/useUserActions'

const { login } = useUserActions()

关于“额外实例”的担忧 #

完全不需要担心直接调用会创建重复的Router或Store实例：

• Vue Router的useRouter()和Pinia的useStore()都是通过依赖注入获取全局已初始化的唯一实例，它们会从当前Vue应用的上下文里拿到预先创建好的实例，不会重复生成。
• 只要是在Vue组件的setup函数、其他Composable中调用这些方法，共享的都是同一个全局实例，没有额外开销。

总结建议 #

• 如果你的Composable需要跨项目复用、或者需要大量单元测试，优先选传参方式；
• 如果只是在当前项目的Vue组件中使用，追求代码简洁，直接调用全局实例更合适。

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