https://github.com/dwqs/vue-mobx

:smile: :star: :innocent: Mobx binding for Vuejs 2.
https://github.com/dwqs/vue-mobx

mobx mobx-vue vuejs2

Last synced: about 1 month ago
JSON representation

:smile: :star: :innocent: Mobx binding for Vuejs 2.

• Host: GitHub
• URL: https://github.com/dwqs/vue-mobx
• Owner: dwqs
• License: mit
• Archived: true
• Created: 2017-07-28T01:29:56.000Z (over 8 years ago)
• Default Branch: dev
• Last Pushed: 2018-05-27T10:10:42.000Z (over 7 years ago)
• Last Synced: 2025-01-15T08:55:21.658Z (11 months ago)
• Topics: mobx, mobx-vue, vuejs2
• Language: TypeScript
• Homepage:
• Size: 135 KB
• Stars: 110
• Watchers: 14
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-mobx - Mobx binding for Vuejs 2. ` 📝 3 years ago` (Utilities [🔝](#readme))
• awesome-vue-zh - vue-mobx - 针对Vuejs 2.x的Mobx绑定. (公用事业 / 国家管理)
• awesome-vue - vue-mobx ★99 - Mobx binding for Vuejs 2.x. (Utilities / State Management)
• awesome-vue - vue-mobx - Mobx binding for Vuejs 2.x. (Utilities / State Management)

README

          
[![build pass](https://api.travis-ci.org/dwqs/vue-mobx.svg?branch=master)](https://travis-ci.org/dwqs/vue-mobx) ![npm-version](https://img.shields.io/npm/v/vue-mobx.svg) ![license](https://img.shields.io/npm/l/vue-mobx.svg) ![bower-license](https://img.shields.io/bower/l/vue-mobx.svg)

# 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:

```js

// 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:

```js

// 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:

```js

// in vue component

    


        
count: {{count}}

        
Update

    

    


    import testModel from './mobx/test';

    export default {

        fromMobx: {

            testModel

        }

    }

```

There is a full [example](https://github.com/dwqs/vue-mobx/tree/master/example).

## LICENSE

MIT