typescript 在vue / vitest中使用依赖注入

lzfw57am 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(154)

1.我的设置

Vue 3应用程序
Pinia商店
在我的main.ts中：app.use(myPlugin)
在MyPlugin.ts中：我根据某些环境条件有条件地创建并向应用程序提供存储库（MyRepo）。此存储库可以与API交互，也可以提供用于开发和测试目的的假数据。
在myStore.ts中：

defineStore('myStore', () => {
  const repo = inject<MyRepoInterface>('myRepo');
  // ....
})

1.我的问题
我在编写依赖于存储的测试时遇到了一个问题，而存储本身又依赖于myStore。当在我的测试中调用inject函数时，我收到以下警告：[Vue warn]: inject() can only be used inside setup() or functional components.此外，repo是undefined，导致错误。
1.我的问题
我正在寻找一个解决方案，以提供在我的测试框架（Vitest）的设置存储库。这样，我就可以在正常的应用程序运行时和运行测试时将其注入到代码中。我如何才能做到这一点？
任何批评的方式，我试图实现dependentinjection是受欢迎的。谢谢你，谢谢！

typescript

来源：https://stackoverflow.com/questions/77317868/use-dependency-injection-with-vue-vitest

1条答案

按热度按时间

bqf10yzr1#

Pinia存储是在第一次调用store函数时示例化的单例。inject用于Pinia存储设置功能意味着第一次使用应该在Vue组件设置或当代生命周期挂钩中，而对于Pinia存储通常没有这样的限制。
用store选项代替function来定义store也是不可能的，尽管它们通常是可互换的。
一种更灵活和测试友好的方法是在store方法中使用显式依赖注入：

let repo = ref(null as unknown as MyRepoInterface);

let init = (cfg: { repo: MyRepoInterface }) => {
  repo.value = cfg.repo;
})

在App组件中：

useMyStore().init({
  repo: inject<MyRepoInterface>('myRepo')
})

赞(0）回复(0）举报 2023-10-22

我来回答

typescript 在vue / vitest中使用依赖注入

1条答案

相关问题

热门标签

最新问答