vue-mobx
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
Dependencies
@types/node: ^8.0.17ava: ^0.21.0babel-core: ^6.25.0babel-plugin-transform-decorators-legacy: ^1.3.4babel-plugin-transform-runtime: ^6.23.0babel-preset-es2015: ^6.24.1babel-preset-stage-0: ^6.24.1debug: ^2.6.8husky: ^0.14.2mobx: ^3.2.2rollup: ^0.43.0rollup-plugin-babel: ^2.7.1rollup-plugin-commonjs: ^8.0.2rollup-plugin-node-builtins: ^2.1.2rollup-plugin-node-resolve: ^3.0.0rollup-plugin-typescript: ^0.8.1rollup-plugin-uglify: ^2.0.1tslint: ^5.4.3typescript: ^2.4.1uglify-es: ^3.0.26vue: ^2.4.2