# muse-model

**Repository Path**: myronliu347/muse-model

## Basic Information

- **Project Name**: muse-model
- **Description**: 优化vuex的状态流写法， 按需加载每个模块
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 0
- **Created**: 2018-05-24
- **Last Updated**: 2021-04-08

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# muse-model

对vuex功能的一个增强，简化了状态流程的写法。增加按需引入model的控制

## 安装

```bash
npm install muse-model
```

or

```bash
yarn add muse-model
```

## 快速上手

```javascript
// model.js
import Vue from 'vue';
import MuseModel, { createMuseModel } from '../../src';
Vue.use(MuseModel);

export default createMuseModel({
  strict: true
});
```

```javascript
// main.js
import Vue from 'vue';
import store from 'model'; // model.js
import App from './App';

new Vue({
  ...App,
  store
}).$mount('app');
```

```javascript
import { Model } from 'muse-model';
// count.js
export default Model({
  namespace: 'count', // 必须
  state: {
    count: 1
  },

  add () {
    return {
      count: this.state.count + 1
    };
  },

  sub () {
    return {
      count: this.state.count - 1
    };
  },
  doubleAdd () {
    this.add();
    return {
      count: this.state.count + 1
    }
  },

  addTimeOut () { // 异步处理
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          count: this.state.count + 1
        });
      }, 1000);
    });
  }
});
```

```html
<template>
<div><button @click="addTimeOut()">+</button>{{count}}<button @click="sub()">-</button></div>
</template>
<script>
import Count from './count';

export default {
    connect: Count, // Model / Array<Model> / Function
    created () {
      console.log(this.count);
    }
});
</script>
```

## Use Class Model

```javascript
import { model, action, getter } from 'muse-model';
export default class Count {
  state = {
    count: 3,
    list: {
      loading: false
    }
  };

  @action add () {
    return {
      count: this.state.count + 1
    };
  }
  @action sub () {
    return {
      count: this.state.count - 1
    };
  }

  @action addNum (num) {
    this.add();
    return {
      count: this.state.count + num
    };
  }
  @loading('list.loading')
  @action
  addTimeOut () {
    return new Promise((res) => {
      setTimeout(() => {
        res({
          count: this.state.count + 1
        });
      }, 2000);
    });
  }

  @getter
  computedCount () {
    return this.state.count + 2;
  }
}
```

## License

 [MIT](http://opensource.org/licenses/MIT)

 Copyright (c) 2018 myron