Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/museui/muse-model
优化vuex的状态流写法， 按需加载每个模块
https://github.com/museui/muse-model
Last synced: 7 days ago
JSON representation
优化vuex的状态流写法， 按需加载每个模块
- Host: GitHub
- URL: https://github.com/museui/muse-model
- Owner: museui
- License: mit
- Created: 2018-06-21T11:56:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T16:33:58.000Z (about 6 years ago)
- Last Synced: 2024-10-14T06:42:16.150Z (30 days ago)
- Language: JavaScript
- Homepage:
- Size: 103 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
+{{count}}-
import Count from './count';
export default {
connect: Count, // Model / Array<Model> / Function
created () {
console.log(this.count);
}
});
```
## 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