From: Eduardo San Martin Morote Date: Wed, 17 May 2023 09:08:44 +0000 (+0200) Subject: docs: using inject within setup stores X-Git-Tag: @pinia/nuxt@0.4.11~1 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=014869be796b6a96afee7b2d9cbfe5073c943292;p=thirdparty%2Fvuejs%2Fpinia.git docs: using inject within setup stores --- diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md index d231044b..cb2826bc 100644 --- a/packages/docs/core-concepts/index.md +++ b/packages/docs/core-concepts/index.md @@ -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.