{"library":"mobx-vue","title":"MobX Vue 2 Bindings","description":"mobx-vue provides Vue 2 bindings for MobX, a state management library that simplifies working with reactive data. It enables Vue components to automatically react to MobX-managed state changes, drawing inspiration from `mobx-react`. The current stable version, 2.2.0, ensures compatibility with a wide range of MobX versions (2 through 6) after a temporary breaking change in v2.1.0 that restricted support to MobX 6. The library's release cadence appears to be irregular, marked by significant version compatibility adjustments. A key differentiator is its unopinionated approach, allowing for a more framework-agnostic data layer, which can ease migration between different view libraries. It is explicitly designed for Vue 2 applications; for Vue 3 support, users should look to `mobx-vue-lite`. It supports both Vue's Options API and, with a strong recommendation, class-based components using `vue-class-component` and decorators.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mobx-vue"],"cli":null},"imports":["import { Observer } from 'mobx-vue'","import { observer } from 'mobx-vue'","import { observable, action, computed } from 'mobx'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { action, computed, observable } from \"mobx\";\nimport Vue from \"vue\";\nimport Component from \"vue-class-component\";\nimport { Observer } from \"mobx-vue\";\n\n// Mock HTTP client for demonstration\nconst http = {\n  get: (url) => {\n    console.log(`Fetching from ${url}`);\n    return new Promise(resolve => {\n      setTimeout(() => {\n        if (url === '/users') {\n          resolve([{ name: 'Alice' }, { name: 'Bob' }]);\n        } else {\n          resolve([]);\n        }\n      }, 500);\n    });\n  }\n};\n\n// ViewModel (MobX Store)\nclass ViewModel {\n    @observable age = 10;\n    @observable users = [];\n\n    @computed get computedAge() {\n        return this.age + 1;\n    }\n\n    @action.bound setAge() {\n        this.age++;\n    }\n    \n    @action.bound async fetchUsers() {\n    \tthis.users = await http.get('/users');\n    }\n}\n\n// Vue Component\n@Observer\n@Component\nexport default class App extends Vue {\n    state = new ViewModel(); // Instantiate your MobX ViewModel\n\n    mounted() {\n        this.state.fetchUsers();\n    }\n}\n\n// To render this in a typical Vue app:\n// new Vue({\n//   render: h => h(App)\n// }).$mount('#app')","lang":"typescript","description":"This quickstart demonstrates creating a reactive MobX ViewModel using decorators and integrating it into a Vue 2 class component using the `@Observer` decorator from `mobx-vue`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}