docs: add store destructure guide (#621)

* docs: add store destructure guide

* Apply suggestions from code review

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 5df92276facddc71864db74f1409300fcc52176a..879878410c9a9562d22da869f04fbd18cd5873f9 100644 (file)
--- 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
+    }
+  },
+})
+```