简体   繁体   English

pinia (Vue.js) 如何确定要使用的正确 pinia 实例

[英]How does pinia (Vue.js) determines the correct pinia instance to use

this is a theoretical question with the goal of understanding how Pinia works under the hood.这是一个理论问题,目的是了解 Pinia 的幕后工作原理。

According to this page, I can use useFooStore() anywhere in my app, even outside of components, as long as I call useFooStore() after I called app.use(pinia) or setActivePinia(pinia).根据页面,只要在调用 app.use(pinia) 或 setActivePinia(pinia) 之后调用 useFooStore(),我就可以在应用程序的任何位置使用 useFooStore(),甚至在组件之外。 (This doesn't apply in case of SSR, but my question refers to using it inside the browser). (这不适用于 SSR,但我的问题是指在浏览器中使用它)。

I don't understand, how "useFooStore()" determines the correct Pinia instance.我不明白,“useFooStore()”如何确定正确的 Pinia 实例。 I could imagine that the pinia is resolved over the Vue app instance but how does "useFooStore" has access to the Vue instance?我可以想象 pinia 是通过 Vue 应用程序实例解析的,但是“useFooStore”如何访问 Vue 实例?

Consider the following sitiation (not tested. Does this even work?):考虑以下情况(未经测试。这是否有效?):

  1. One uses Compostion API一种使用 Composition API
  2. There are two Vue instances有两个 Vue 实例
  3. Both Vue instances have their own pinia instance两个 Vue 实例都有自己的 pinia 实例
  4. A Component of "Vue Instance A" uses the "foo" store by calling foo = "useFooStore()" “Vue 实例 A”的组件通过调用foo = "useFooStore()"使用“foo”存储
  5. A Component of "Vue Instance B" uses the "foo" store by calling foo = "useFooStore()" “Vue Instance B”的组件通过调用foo = "useFooStore()"使用“foo”存储

How does the module "useFooStore.js" figures out the correct pinia?模块“useFooStore.js”如何计算出正确的 pinia? I know, that the component instance has access to the vue instance it's running inside, but "useFooStore" doesn't has access to the component neither lexical nor through "this".我知道,组件实例可以访问它在内部运行的 vue 实例,但是“useFooStore”无法访问组件,无论是词汇上还是通过“this”。 How is this possible in JS???这在 JS 中怎么可能???

Or is the pinia instance set globally (similar to the singleton design pattern) and it is just assumed, that there is just one Vue Instance.或者是全局设置的 pinia 实例(类似于 singleton 设计模式)并且只是假设只有一个 Vue 实例。 It seems strange, that this is not mentioned anywhere if thats the case...这似乎很奇怪,如果是这样的话,在任何地方都没有提到这一点......

When you use the app.use() method to install a plugin in Vue, that plugin scope becomes the installed Vue instance's scope. useFooStore() will have access to the correct instance of Pinia because it is called within the context.当您使用app.use()方法在 Vue 中安装插件时,该插件 scope 将成为已安装的 Vue 实例的useFooStore()将可以访问正确的 Pinia 实例,因为它是在上下文中调用的。

In the situation described, it would not be possible for a component on one Vue instance to access the stores from a different instance of Pinia, they are isolated (context-bounded).在所描述的情况下,一个 Vue 实例上的组件不可能从 Pinia 的不同实例访问商店,它们是隔离的(上下文绑定的)。 Vue does not have a global singleton instance, so if you want to use multiple instances of Vue in the same app, you will have to create/manage those by yourself. Vue 没有全局的 singleton 实例,所以如果你想在同一个应用程序中使用 Vue 的多个实例,你将不得不自己创建/管理它们。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM