Lightweight Vue 3 bindings for MobX based on Composition API.
Demo: https://stackblitz.com/edit/mobx-vue-lite-demo
npm install mobx mobx-vue-liteCreates an observable object with the given properties, methods and computed values.
<script setup> import { useLocalObservable } from 'mobx-vue-lite' const state = useLocalObservable(() => ({ count: 0, get double() { return this.count * 2 }, increment() { this.count++ } })) </script> <template> <div>Count: {{ state.count }}</div> <div>Doubled: {{ state.double }}</div> <button @click="state.increment">Increment</button> </template>Is a renderless Vue component, which applies observer to its children.
// main.js import { createApp } from 'vue' import Observer from 'mobx-vue-lite' const app = createApp(App) app.use(Observer)<script setup> import { observable, runInAction } from 'mobx' import { Observer } from 'mobx-vue-lite' const data = observable({ name: 'John' }) const changeName = () => { runInAction(() => { data.name = 'Jane' }) } </script> <template> <Observer> <div>Name: {{ data.name }}</div> <button @click="changeName">Change name</button> </Observer> </template>Create a global observer from a local observer.
// 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++ }, })) })<script setup> import { useGlobalObservable } from './store' // Can be reused in any component and state will be in sync const state = useGlobalObservable() </script> <template> <div>Count: {{ state.count }}</div> <div>Doubled: {{ state.double }}</div> <button @click="state.increment">Increment</button> </template>You can watch the state and its changes through Vue's watch:
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 <Observer /> component.
<script setup> import { Observer } from 'mobx-vue-lite' import { CounterStore } from './counterStore' const state = new CounterStore() </script> <template> <Observer> <h1 v-text="state.count" /> <button @click="state.decrement">-</button> <button @click="state.increment">+</button> </Observer> </template>To use the <Observer /> component globally a Nuxt 3 app, add this to your nuxt config:
import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModules: ['mobx-vue-lite/nuxt'], })API was inspired from https://github.com/mobxjs/mobx-react-lite.
MIT
