https://github.com/nanostores/vue
Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
https://github.com/nanostores/vue
devtools nanostores state state-management store vue vue-devtools vue3 vuejs
Last synced: 10 months ago
JSON representation
Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
- Host: GitHub
- URL: https://github.com/nanostores/vue
- Owner: nanostores
- License: mit
- Created: 2021-10-14T17:01:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-27T22:35:51.000Z (over 2 years ago)
- Last Synced: 2024-04-20T08:20:40.412Z (about 2 years ago)
- Topics: devtools, nanostores, state, state-management, store, vue, vue-devtools, vue3, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.04 MB
- Stars: 46
- Watchers: 3
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nano Stores Vue
Vue integration for **[Nano Stores]**, a tiny state manager
with many atomic tree-shakable stores.
* **Small.** Less than 1 KB with all helpers. Zero dependencies.
* **Fast.** With small atomic and derived stores, you do not need to call
the selector function for all components on every store change.
* **Tree Shakable.** The chunk contains only stores used by components
in the chunk.
* **Helpers.** Designed to keep code clean and save a few keystrokes.
* **Devtools.** Plugin with full support of [Vue Devtools].
* Was designed to move logic from components to stores.
* It has good **TypeScript** support.
## Install
```sh
npm install @nanostores/vue
```
## Usage
### Store state
Subscribe to store changes and use reactive store state.
```vue
{{ profile.name }}
import { useStore } from '@nanostores/vue'
import { $profile } from '../stores/index.js'
const profile = useStore($profile)
```
### Multiple store states
Combines multiple stores into a single reactive state.
```vue
{{ t.header.title }}
{{ t.footer.copyright }}
import { mapStores } from '@nanostores/vue'
import { headerMessages, footerMessages } from '../i18n/index.js'
const t = mapStores({
header: headerMessages,
footer: footerMessages
})
```
### Form handling
Since the store state is deep read-only, you cannot directly mutate it.
But for `v-model` you can create model via `useVModel(store, keys, opts)`.
It will explicitly mutate the store via `store.set()` / `store.setKey()`.
```vue
import { useVModel } from '@nanostores/vue'
import { $profile } from '../stores/index.js'
const username = useVModel($profile, 'username')
```
The `keys` argument can be an array of keys to create multiple models.
Each model will be prefixed with `Model`. You can change it via `opts.prefix`.
```vue
import { useVModel } from '@nanostores/vue'
import { $profile } from '../stores/index.js'
const {
firstNameModel,
lastNameModel
} = useVModel($profile, ['firstName', 'lastName'])
```
## Devtools
### Install
```sh
npm install --save-dev @vue/devtools-api @nanostores/logger
```
### Usage
#### Store detector
Install **[Vue Devtools]** plugin as usual. It will detect nanostores
in selected component and add their states to the **component inspector**.
```js
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
const app = createApp(…)
app.use(devtools)
```
> Notice: if you are using SSR, there is no Vue Devtools on server.
> Check it’s a browser environment:
> ```js
> if (window) app.use(devtools)
> ```
Attach stores to add them to the **nanostores inspector**
and see their builds, lifecycles and changes on the **timeline**.
```js
import { createApp } from 'vue'
import { devtools } from '@nanostores/vue/devtools'
import { $user } from '../stores/index.js'
const app = createApp(…)
app.use(devtools, { 'User': $user })
```
### 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
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