Muse-model NPM

muse-model

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

安装

npm install muse-model

yarn add muse-model

快速上手

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

export default createMuseModel({
  strict: true
});

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

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

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

<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

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;
  }
}