From 872a351bfae50540d112a7fc4970a41e0fed9a6b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 17 Jun 2021 12:57:11 +0200 Subject: [PATCH] docs: note about custom properties in devtools --- docs/core-concepts/plugins.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/core-concepts/plugins.md b/docs/core-concepts/plugins.md index 9a0676cf..3d4776a1 100644 --- a/docs/core-concepts/plugins.md +++ b/docs/core-concepts/plugins.md @@ -53,7 +53,7 @@ You can add properties to every store by simply returning an object of them in a pinia.use(() => ({ hello: 'world' })) ``` -You can also set the property directly on the `store`: +You can also set the property directly on the `store` but **if possible use the return version so they can be automatically tracked by devtools**: ```js pinia.use(({ store }) => { @@ -108,6 +108,17 @@ pinia.use(({ store }) => { }) ``` +Any property _returned_ by a plugin will be automatically tracked by devtools so in order to make `hasError` visible in devtools, make sure to add it to `store._customProperties` **in dev mode only** if you want to debug it in devtools: + +```js +// from the example above +pinia.use(({ store }) => { + store.$state.secret = globalSecret + store.secret = globalSecret + store._customProperties.add('secret') +}) +``` + :::warning If you are using **Vue 2**, Pinia is subject to the [same reactivity caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats) as Vue. You will need to use `set` from `@vue/composition-api`: -- 2.47.2