Skip to content

Commit

Permalink
docs: using inject within setup stores
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed May 17, 2023
1 parent 1f115a1 commit 014869b
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions packages/docs/core-concepts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 014869b

Please sign in to comment.