]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
docs: using inject within setup stores
authorEduardo San Martin Morote <posva13@gmail.com>
Wed, 17 May 2023 09:08:44 +0000 (11:08 +0200)
committerEduardo San Martin Morote <posva13@gmail.com>
Wed, 17 May 2023 09:08:44 +0000 (11:08 +0200)
packages/docs/core-concepts/index.md

index d231044be5e035b88c23f52cf4ef2217940a90eb..cb2826bcd86ce5f29ccf9336aac7e1d191fc942b 100644 (file)
@@ -70,6 +70,29 @@ In _Setup Stores_:
 
 Setup stores bring a lot more flexibility than [Option Stores](#option-stores) as you can create watchers within a store and freely use any [composable](https://vuejs.org/guide/reusability/composables.html#composables). However, keep in mind that using composables will get more complex when using [SSR](../cookbook/composables.md).
 
+Setup stores are also able to rely on globally _provided_ properties like the Router or the Route. Any property [provided at the App level](https://vuejs.org/api/application.html#app-provide) can be accessed from the store using `inject()`, just like in components:
+
+```ts
+import { inject } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const useSearchFilters = defineStore('search-filters', () => {
+  const route = useRoute()
+  // this assumes `app.provide('appProvided', 'value')` was called
+  const appProvided = inject('appProvided')
+
+  // ...
+
+  return {
+    // ...
+  }
+})
+```
+
+:::warning
+Do not return properties like `useRoute()` or `appProvided` (from the example above) as they do not belong to the store itself and you can directly access them within components with `useRoute()` and `inject('appProvided')`.
+:::
+
 ## What syntax should I pick?
 
 As with [Vue's Composition API and Options API](https://vuejs.org/guide/introduction.html#which-to-choose), pick the one that you feel the most comfortable with. If you're not sure, try [Option Stores](#option-stores) first.