Vue bindings for MobX
npm install mobx-vue
Vue2 bindings for MobX, inspired by mobx-react. Looking for Vue3 support? Please look here mobx-vue-lite
!logo
* means all and - means none``bash`
npm i mobx-vue -S
or
`bash`
yarn add mobx-vue
MobX is an unopinionated, scalable state management, which can make our programming more intuitive.
Unlike the other vue-rx-inspired libraries which based on the plugin mechanism of vue, mobx-vue will be the simplest you ever meet. What you all need is to bind your state in component definition and observe it just like mobx-react does, then your component will react to your state changes automatically which managed by mobx.
And, the most important is that you can build a view-library-free application, if you wanna migrate to another view library(React/Angular) someday, rewrite the template and switch to the relevant mobx bindings(mobx-react,mobx-angular,mobx-angularjs) is all you have to do.
* Build A View-Framework-Free Data Layer Based on MobX — Integration With Vue
* Why MobX + movue, instead of Vuex?
* 基于 MobX 构建视图框架无关的数据层-与 Vue 的结合(1)
We highly recommend using the bindings with vue-class-component decorator, and define the Store/ViewModel independently.
`ts
import { action, computed, observable } from "mobx";
export default class ViewModel {
@observable age = 10;
@observable users = [];
@computed get computedAge() {
return this.age + 1;
}
@action.bound setAge() {
this.age++;
}
@action.bound async fetchUsers() {
this.users = await http.get('/users')
}
}
`
` {{user.name}}vue
`
Or used with the traditional way:
`vue``
All you need is to bind your state to component and observe it. No more reactive data definitions in component.
Tips: If you're tired of instantiating instance manually every time, you might wanna try the mmlpx library which leveraged a dependency injection system.
* observer((VueComponent | options): ExtendedVueComponent