mobx-vue

Vue2 bindings for MobX, inspired by mobx-react. Looking for Vue3 support? Please look here mobx-vue-lite

Support Table

| package | mobx v6 | mobx v2/v3/v4/v5 | vue2 | vue3 | | ------ | ------- | ---------------- | ---- | ---- | | mobx-vue | >= v2.1.0 | * (exclude v2.1.0) | * | - | | mobx-vue-lite | * | - | - | * |

* means all and - means none

Installation

npm i mobx-vue -S

or

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 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.

Articles:

• Build A View-Framework-Free Data Layer Based on MobX — Integration With Vue

• Why MobX + movue, instead of Vuex?

• 基于 MobX 构建视图框架无关的数据层-与 Vue 的结合(1)

Usage

We highly recommend using the bindings with vue-class-component decorator, and define the Store/ViewModel independently.

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')
    }
}

<template>
    <section>
        <p v-text="state.age"></p>
        <p v-text="state.computedAge"></p>
        <p v-for="user in state.users" :key="user.name">{{user.name}}</p>
        <button @click="state.setAge"></button>
    </section>
</template>

<script lang="ts">
    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();
        }
    }
</script>

Or used with the traditional way:

<script lang="ts">
    import { observer } from "mobx-vue";
    import ViewModel from "./ViewModel";

    export default observer({
        data() {
            return { state: new ViewModel() }
        },
        mounted() {
            this.state.fetchUsers() 
        }
    })
</script>

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.

API

• observer((VueComponent | options): ExtendedVueComponent