0.0.3 • Published 8 years ago
s-flux v0.0.3
s-flux:a simple flux lib (测试版)
介绍
一个简单的flux工具库,支持单页应用和多页应用,支持同步action和异步action。
安装
依赖'es6-promise', npm模块指向
dist/s-flux.common.js
。dist/s-flux.js
和dis/s-flux.min.js
为浏览器直接引用,为UMD模块,es6-promise
已经打包在内。
- 浏览器直接引用:
<script src="s-flux/dist/s-flux.min.js"></script>
<script>
var Store = SFlux.Store;
var createAction = SFlux.createAction;
//...
</script>
- commonjs模块引用:
import {Store, createAction} form 's-flux';
// or
var SFlux = require('s-flux');
API
- Store: 数据仓库基类
// app-store.js
import {Store} from 's-flux';
// 创建一个store
var appStore = module.exports = new Store({
// 初始化状态
initialState = {},
// 数据更新: mutation => {type: 'mutation type', data: 'mutation data'}
mutation = function(state, mutation) {
return state;
},
// 子模块:{key: childStore}
modules = {},
// 中间件
middlewares = [],
// store名,便于调试用
name = 'store'
});
- createMutationTypes: 创建一组数据更新常量
// mutation-types.js
import {createMutationTypes} from 's-flux';
module.exports = createMutationTypes({
'INCREMENT',
'DECREMENT',
'OTHER',
'BEFORE_SUBMIT',
'SUBMIT'
});
- createAction: 创建一个action
// actions.js
import {createAction} from 's-flux';
export var submit = createAction(function(params, {store, error, dispatch}) {
dispatch({
type: 'BEFORE_SUBMIT'
}, true);
//异步action
setTimeout(function() {
dispatch({
type: 'SUBMIT',
data: '111'
});
});
});
- setGlobalStore: 注册一个全局store, 这样不要每次调用action的时候传入
// app.js
import {setGlobalStore} from 's-flux';
import appStore from './app-store';
import mutationTypes from './mutation-types';
import {submit} from './actions';
// 注册全局store
setGlobalStore(appStore);
// 调用action
console.log('loading……')
submit({})
.then(function(data) {
console.log('success……')
})
.catch(function(error) {
/console.log('error……')
});