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

🐉 Vue bindings for MobX
https://github.com/mobxjs/mobx-vue

javascript mobx mobx-vue reactive-programming vue

Last synced: 1 day ago
JSON representation

🐉 Vue bindings for MobX

• Host: GitHub
• URL: https://github.com/mobxjs/mobx-vue
• Owner: mobxjs
• License: mit
• Created: 2018-05-25T06:37:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T18:07:01.000Z (over 1 year ago)
• Last Synced: 2024-04-25T02:42:38.320Z (7 months ago)
• Topics: javascript, mobx, mobx-vue, reactive-programming, vue
• Language: TypeScript
• Homepage:
• Size: 1.54 MB
• Stars: 473
• Watchers: 9
• Forks: 22
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-state - mobx-vue

README

        
# mobx-vue

[![Build Status](https://github.com/mobxjs/mobx-vue/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/stylus/stylus/actions?query=branch%3Amaster)

[![npm version](https://img.shields.io/npm/v/mobx-vue.svg)](https://www.npmjs.com/package/mobx-vue)

[![coverage](https://img.shields.io/codecov/c/github/mobxjs/mobx-vue.svg)](https://codecov.io/gh/mobxjs/mobx-vue)

[![npm downloads](https://img.shields.io/npm/dt/mobx-vue.svg)](https://www.npmjs.com/package/mobx-vue)

Vue2 bindings for MobX, inspired by [mobx-react](https://github.com/mobxjs/mobx-react). Looking for Vue3 support? Please look here [mobx-vue-lite](https://github.com/mobxjs/mobx-vue-lite)

![logo](https://github.com/mobxjs/mobx-vue/blob/master/logo.png?raw=true)

## Support Table

| package | mobx v6 | mobx v2/v3/v4/v5 | vue2 | vue3 | 

| ------  | ------- | ---------------- | ---- | ---- |

| [mobx-vue](https://github.com/mobxjs/mobx-vue) | >= v2.1.0 | * (exclude v2.1.0) | * | - |

| [mobx-vue-lite](https://github.com/mobxjs/mobx-vue-lite) | * | - | - | * |

> `*` means `all` and `-` means `none`

 

## Installation

```bash

npm i mobx-vue -S

```

or

```bash

yarn add mobx-vue

```

## Why 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](https://github.com/mobxjs/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](https://github.com/mobxjs/mobx-react),[mobx-angular](https://github.com/mobxjs/mobx-angular),[mobx-angularjs](https://github.com/mobxjs/mobx-angularjs)) is all you have to do.

### Articles: 

* [Build A View-Framework-Free Data Layer Based on MobX — Integration With Vue](https://medium.com/@kuitos/build-a-view-framework-free-data-layer-based-on-mobx-integration-with-vue-1-8b524b86c7b8)

* [Why MobX + movue, instead of Vuex?](https://github.com/nighca/movue/issues/8)

* [基于 MobX 构建视图框架无关的数据层-与 Vue 的结合(1)](https://zhuanlan.zhihu.com/p/37736470)

## Usage

We highly recommend using the bindings with [vue-class-component](https://github.com/vuejs/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')

    }

}

```

```vue

    

        


        


        
{{user.name}}

        

    


    import Vue from "vue";

    import Component from "vue-class-component";

    import { Observer } from "mobx-vue";

    import ViewModel from "./ViewModel";

    @Observer

    @Component

    export default class App extends Vue {

        state = new ViewModel()

        mounted() { 

            this.state.fetchUsers();

        }

    }

```

Or used with the traditional way:

```vue

    import { observer } from "mobx-vue";

    import ViewModel from "./ViewModel";

    export default observer({

        data() {

            return { state: new ViewModel() }

        },

        mounted() {

            this.state.fetchUsers() 

        }

    })

```

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](https://github.com/mmlpxjs/mmlpx) library which leveraged a dependency injection system.*

## API

* observer((VueComponent | options): ExtendedVueComponent