vue-mobx

Mobx binding for Vue.

Only supports Vuejs 2.x & Mobx 2.2.x or higher.

Installation

Install the pkg with npm:

npm install vue-mobx --save

or yarn

yarn add vue-mobx

or bower

bower install vue-mobx

Usage

Obviously it works with Mobx and Vuejs, install via NPM: npm i --save mobx vue vue-mobx:

1. install vue-mobx plugin:

// entry.js
import Vue from 'vue';
import {observable, isObservable, toJS} from 'mobx';
import VueMobx from 'vue-mobx';
 
Vue.use(VueMobx, {
    toJS: toJS, // must
    isObservable: isObservable, // must
    observable: observable,  // optional
});

2. create models:

// create models
 
import {observable, action} from 'mobx';
 
Class Test {
    @observable
    count = 0;
 
    @action.bound
    changeCount(){
        ++this.count;
    }
}
 
const test = new Test();
export default test;

3. use models in vue component:

// in vue component
<template>
    <div>
        <p>count: {{count}}</p>
        <p @click="changeCount">Update</p>
    </div>
</template>    
<script>
    import testModel from './mobx/test';
 
    export default {
        fromMobx: {
            testModel
        }
    }
</script>

There is a full example.

You can also hot-link the CDN version: https://unpkg.com/vue-mobx/dist/index.min.js, VueMobx is exposed to window object.

LICENSE

MIT