Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mobxjs/mobx-vue-lite
Lightweight Vue 3 bindings for MobX based on Composition API.
https://github.com/mobxjs/mobx-vue-lite
composition-api mobx vue
Last synced: 5 days ago
JSON representation
Lightweight Vue 3 bindings for MobX based on Composition API.
- Host: GitHub
- URL: https://github.com/mobxjs/mobx-vue-lite
- Owner: mobxjs
- License: mit
- Created: 2021-09-11T14:41:17.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-10T06:54:11.000Z (3 months ago)
- Last Synced: 2024-08-10T08:15:07.937Z (3 months ago)
- Topics: composition-api, mobx, vue
- Language: TypeScript
- Homepage:
- Size: 695 KB
- Stars: 69
- Watchers: 4
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# mobx-vue-lite
Lightweight Vue 3 bindings for MobX based on Composition API.
Demo: https://stackblitz.com/edit/mobx-vue-lite-demo
## Install
```sh
npm install mobx mobx-vue-lite
```
## Example
### **`useLocalObservable(initializer: () => T, annotations?: AnnotationsMap): Ref`**
Creates an observable object with the given properties, methods and computed values.
```html
import { useLocalObservable } from 'mobx-vue-lite'
const state = useLocalObservable(() => ({
count: 0,
get double() {
return this.count * 2
},
increment() {
this.count++
}
}))
Count: {{ state.count }}
Doubled: {{ state.double }}
Increment
```
### **``**
Is a renderless Vue component, which applies observer to its children.
#### Install as a global plugin (Optional)
```ts
// main.js
import { createApp } from 'vue'
import Observer from 'mobx-vue-lite'
const app = createApp(App)
app.use(Observer)
```
#### Or: Import and register it locally
```html
import { observable, runInAction } from 'mobx'
import { Observer } from 'mobx-vue-lite'
const data = observable({ name: 'John' })
const changeName = () => {
runInAction(() => {
data.name = 'Jane'
})
}
Name: {{ data.name }}
Change name
```
### **`createGlobalObservable(stateFactory: () => T): () => T`**
Create a global observer from a local observer.
```ts
// store.ts
import { createGlobalObservable, useLocalObservable } from 'mobx-vue-lite'
export const useGlobalObservable = createGlobalObservable(() => {
return useLocalObservable(() => ({
count: 0,
get double() {
return this.count * 2
},
increment() {
this.count++
},
}))
})
```
```html
import { useGlobalObservable } from './store'
// Can be reused in any component and state will be in sync
const state = useGlobalObservable()
Count: {{ state.count }}
Doubled: {{ state.double }}
Increment
```
## Tips
You can watch the state and its changes through Vue's watch:
```ts
import { watch } from 'vue'
const state = useLocalObservable(() => ({
count: 0,
increment() {
this.count++
},
}))
// watch the whole state
watch(state, (value) => {
console.log(value)
})
// watch part of a state
watch(() => state.value.count, (count) => {
console.log(count)
})
```
Class observables should work out-of-the-box. Just wrap the component with the `` component.
```html
import { Observer } from 'mobx-vue-lite'
import { CounterStore } from './counterStore'
const state = new CounterStore()
-
+
```
## Usage with Nuxt 3
To use the `` component globally a Nuxt 3 app, add this to your nuxt config:
```ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: ['mobx-vue-lite/nuxt'],
})
```
## Credits
API was inspired from https://github.com/mobxjs/mobx-react-lite.
## License
MIT