Skip to content

Commit 014869b

Browse files
committed
docs: using inject within setup stores
1 parent 1f115a1 commit 014869b

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

packages/docs/core-concepts/index.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,29 @@ In _Setup Stores_:
7070

7171
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).
7272

73+
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:
74+
75+
```ts
76+
import { inject } from 'vue'
77+
import { useRoute } from 'vue-router'
78+
79+
export const useSearchFilters = defineStore('search-filters', () => {
80+
const route = useRoute()
81+
// this assumes `app.provide('appProvided', 'value')` was called
82+
const appProvided = inject('appProvided')
83+
84+
// ...
85+
86+
return {
87+
// ...
88+
}
89+
})
90+
```
91+
92+
:::warning
93+
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')`.
94+
:::
95+
7396
## What syntax should I pick?
7497

7598
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.

0 commit comments

Comments
 (0)