From 58d410967e19fab1a48a659d3995f33e0ceb7efb Mon Sep 17 00:00:00 2001 From: TomatoGuy0502 Date: Wed, 25 Aug 2021 16:40:26 +0800 Subject: [PATCH] docs: add store destructure guide (#621) * docs: add store destructure guide * Apply suggestions from code review Co-authored-by: Eduardo San Martin Morote --- packages/docs/core-concepts/index.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md index 5df92276..87987841 100644 --- a/packages/docs/core-concepts/index.md +++ b/packages/docs/core-concepts/index.md @@ -63,3 +63,23 @@ export default defineComponent({ }, }) ``` + +In order to extract properties from the store while keeping its reactivity, you need to use `storeToRefs()`. It will create refs for any reactive property. This is useful when you are only using state from the store but not calling any action: +```js +import { storeToRefs } from 'pinia' + +export default defineComponent({ + setup() { + const store = useStore() + // `name` and `doubleCount` are reactive refs + // This will also create refs for properties added by plugins + // but skip any action or non reactive (non ref/reactive) property + const { name, doubleCount } = storeToRefs(store) + + return { + name, + doubleCount + } + }, +}) +``` -- 2.47.3