diff --git a/README.md b/README.md index 55235f8..9ab0b1b 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,14 @@ with many atomic tree-shakable stores. * Was designed to move logic from components to stores. * It has good **TypeScript** support. + ## Install ```sh npm install @nanostores/vue ``` + ## Usage ### Store state @@ -30,21 +32,14 @@ Subscribe to store changes and use reactive store state. ```vue - ``` @@ -57,18 +52,14 @@ Generate multiple store states and save a few keystrokes.
{{ project.name }} / {{ user.name }}
- ``` @@ -83,16 +74,11 @@ It will explicitly mutate the store via `store.set()` / `store.setKey()`. - ``` @@ -105,32 +91,32 @@ Each model will be prefixed with `Model`. You can change it via `opts.prefix`. - ``` + ## Devtools

Nanostores Vue Devtools

+ ### Install ```sh npm install --save-dev @vue/devtools-api @nanostores/logger ``` + ### Usage #### Store detector @@ -142,8 +128,6 @@ in selected component and add their states to the **component inspector**. import { createApp } from 'vue' import { devtools } from '@nanostores/vue/devtools' -import { User } from '../stores/user.js' - const app = createApp(…) app.use(devtools) ``` @@ -161,20 +145,29 @@ and see their builds, lifecycles and changes on the **timeline**. import { createApp } from 'vue' import { devtools } from '@nanostores/vue/devtools' -import { User } from '../stores/user.js' +import { $user } from '../stores/index.js' const app = createApp(…) -app.use(devtools, { User }) + +app.use(devtools, { User: $user }) ``` -### Settings -The states of all detected stores in **component inspector** are updated -in real time. You can disable this in the the plugin settings -via the **Real-time update detected** property. +### Plugin Settings + +#### Real-time update detection + +Real-time update of the states of all detected stores +in the **component inspector**. + +#### Keep unmounted + +Keeps all unmounted stores in **Nanostores inspector** tab. + +#### Reduce data usage -By default, we removes unmounted stores from **nanostores inspector** -to keep it clean. You can change this via the **Keep unmounted** property. +In some places hides the full store snapshot to reduce data usage +and speed up devtools. [Nano Stores]: https://github.com/nanostores/nanostores/ [Vue Devtools]: https://devtools.vuejs.org