Skip to content

Commit

Permalink
修改：
Browse files Browse the repository at this point in the history 
  * lugiax 文档说明。
  • Loading branch information
@zenjava
zenjava authored and guoruiguang committed Aug 8, 2019
1 parent 62adf0e commit 9468de1
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 25 deletions.
85 changes: 75 additions & 10 deletions doc/lugiax.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,28 +61,27 @@ const getAsyncResult = new Promise((resolve,reject) => {
import lugiax from "@lugia/lugiax";
const userModel = lugiax.register({
model: 'user',
state: {name: 'user'},
state: {name: 'userName'},
mutations: {}
});
const loginModel = lugiax.register({
model: 'login',
state: {login: ' '},
state: {login: 'login'},
mutations: {}
});

lugiax.getState().get('user').get('name'); // user
userModel.getState().get('user').get('name'); // userName
loginModel.getState().get('login').get('login'); // login
```

## lugiax API

### lugiax.register

params:

```javascript
{
model: '', // string 模块名称（必填），值必须唯一否则将会报错；
state: {}，//组件的初始状态 类型为非 null & 非 undefined即可
state: {}, //组件的初始状态 类型为非 null & 非 undefined即可
mutations:{ // 本模型对外提供的一系列业务操作
sync: {
doSomethings() { // 一个同步操作} // Function
Expand All @@ -94,7 +93,7 @@ params:
}
```
returned:
mutations:
```javascript
{
Expand All @@ -114,12 +113,78 @@ lugiax.connect(
return { data: state.data, };
},
mutations => {
const { todo, } = mutations;
return { delItem: todo.delTask, };
return { delItem: mutations.delTask, };
}
)(List);
)(Component);
```
connect 多个model:
```javascript
lugiax.connect(
[todo,user], // 模块名称（必填）
state => {
const [todo, user] = state
return { data: todo.get('data'),name: user.get('name') };
},
mutations => {
const [todo, user] = mutations;
return { delItem: todo.delTask, addName: user.addName };
}
)(Component);
```
操作 model State 中具体某个属性值:
``` javascript
{
model: 'user',
state: {
user: {
guo: {age: 18}
}
},
mutations:{
addUser(states, params){
const {name, age} = params;
return state.setIn(['user',name,'age'],age)
},
deleteUser(states, params){
const {name} = params;
return state.deleteIn(['user',name])
}
}
};

lugiax.connect(
user, // 模块名称（必填）
state => {
const name = 'guo';
return { age: state.getIn(['user',name,'age']) };
},
mutations => {}
)(Component);
```
通过setIn 、getIn 、deleteIn 等api来操作state中深层嵌套的值。
小提示：
向 深层次的state 中setIn 某个属性的时候，如果该属性为一个对象，比如给 user 设置一个 name 为 li 的
age，你可能会这样设置(此处为mutations部分的代码)：
```javascript
mutations:{
addUser(states, params){
const {name, age} = params;
const theAge = {age};
return state.setIn(['user',name],theAge)
}
}
```
这样，你在后面操作 li 的age 的时候，会抛出 Immutable 的路径错误信息，因为直接设置对象的话，
Immutable 丢失了路径信息，所以要向上面例子中，填写完整的path路径进行设置。
更多 API 请参照 [Immutable ](https://facebook.github.io/immutable-js/docs/#/)
### lugiax.bind
双向绑定，需要指定 `mutation`，不能动态生成 `mutation` 。
Expand Down
75 changes: 63 additions & 12 deletions src/design/page/getDocument.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1793,29 +1793,26 @@ module.exports = param => {
{text:'import lugiax from "@lugia/lugiax";\n' +
'const userModel = lugiax.register({\n' +
' model: \'user\',\n' +
' state: {name: \'user\'},\n' +
' state: {name: \'userName\'},\n' +
' mutations: {}\n' +
'});\n' +
'const loginModel = lugiax.register({\n' +
' model: \'login\',\n' +
' state: {login: \' \'},\n' +
' state: {login: \'login\'},\n' +
' mutations: {}\n' +
'});\n' +
'\n' +
'lugiax.getState().get(\'user\').get(\'name\'); // user',bash:true, margin: '0 0 30px',javascript:true},



'userModel.getState().get(\'user\').get(\'name\'); // userName\n' +
'loginModel.getState().get(\'login\').get(\'login\'); // login',bash:true, margin: '0 0 30px',javascript:true},
],
},
{
title: 'lugiax API',
content: [
{text: 'lugiax.register',weight:600},
{text: 'params:', margin: '0 0 5px'},
{text:'{\n' +
' model: \'\', // string 模块名称（必填），值必须唯一否则将会报错；\n' +
' state: {}，//组件的初始状态 类型为非 null & 非 undefined即可\n' +
' state: {}, //组件的初始状态 类型为非 null & 非 undefined即可\n' +
' mutations:{ // 本模型对外提供的一系列业务操作\n' +
' sync: {\n' +
' doSomethings() { // 一个同步操作} // Function\n' +
Expand All @@ -1825,7 +1822,7 @@ module.exports = param => {
' } \n' +
' }\n' +
'}',bash:true, margin: '0 0 30px',javascript:true},
{text: 'returned:', margin: '0 0 5px'},
{text: 'mutations:', margin: '0 0 5px'},
{text:'{\n' +
' mutations:{ //供React组件或其它Model的Action进行调用的触发更新 state 的方法。 \n' +
' doSomethings, // Function\n' +
Expand All @@ -1839,10 +1836,65 @@ module.exports = param => {
' return { data: state.data, };\n' +
' },\n' +
' mutations => {\n' +
' const { todo, } = mutations;\n' +
' return { delItem: todo.delTask, };\n' +
' return { delItem: mutations.delTask, };\n' +
' }\n' +
')(List);\n',bash:true, margin: '0 0 30px',javascript:true},
{text: 'connect 多个model:', margin: '0 0 5px'},
{text:'lugiax.connect(\n' +
' [todo,user], // 模块名称（必填）\n' +
' state => {\n' +
' const [todo, user] = state\n' +
' return { data: todo.get(\'data\'),name: user.get(\'name\') };\n' +
' },\n' +
' mutations => {\n' +
' const [todo, user] = mutations;\n' +
' return { delItem: todo.delTask, addName: user.addName };\n' +
' }\n' +
')(Component);',bash:true, margin: '0 0 30px',javascript:true},
{text: '操作 model State 中具体某个属性值:', margin: '0 0 5px'},
{text:'{\n' +
' model: \'user\', \n' +
' state: {\n' +
' user: {\n' +
' guo: {age: 18}\n' +
' }\n' +
' },\n' +
' mutations:{\n' +
' addUser(states, params){\n' +
' const {name, age} = params;\n' +
' return state.setIn([\'user\',name,\'age\'],age)\n' +
' },\n' +
' deleteUser(states, params){\n' +
' const {name} = params;\n' +
' return state.deleteIn([\'user\',name])\n' +
' }\n' +
' }\n' +
'};\n' +
' \n' +
'lugiax.connect(\n' +
' user, // 模块名称（必填）\n' +
' state => {\n' +
' const name = \'guo\';\n' +
' return { age: state.getIn([\'user\',name,\'age\']) };\n' +
' },\n' +
' mutations => {}\n' +
')(Component);',bash:true, margin: '0 0 30px',javascript:true},
{text: '通过setIn 、getIn 、deleteIn 等api来操作state中深层嵌套的值。',margin: '0 0 5px'},
{text: '小提示：',margin: '0 0 5px'},
{text: '向 深层次的state 中setIn 某个属性的时候，如果该属性为一个对象，比如给 user 设置一个 name 为 li 的\n' +
'age，你可能会这样设置(此处为mutations部分的代码)：',margin: '0 0 5px'},
{text:'mutations:{\n' +
' addUser(states, params){\n' +
' const {name, age} = params;\n' +
' const theAge = {age};\n' +
' return state.setIn([\'user\',name],theAge)\n' +
' }\n' +
' }',bash:true, margin: '0 0 30px',javascript:true},
{text: '这样，你在后面操作 li 的age 的时候，会抛出 Immutable 的路径错误信息，' , inline:true},
{text: '因为直接设置对象的话，Immutable 丢失了路径信息，' , inline:true},
{text: '所以要向上面例子中，填写完整的path路径进行设置。' , inline:true},
{text: '更多 API 请参照 ' , inline:true},
{ text: ` [Immutable]` ,link:'https://facebook.github.io/immutable-js/docs/#/', inline:true },
{text: 'lugiax.bind',weight:600},
{text: '双向绑定，需要指定 `mutation`，不能动态生成 `mutation` 。',margin: '0 0 5px'},
{text:'const mutations = {\n' +
Expand Down Expand Up @@ -1871,7 +1923,6 @@ module.exports = param => {
' },\n' +
' }\n' +
')(InputTask //Component 组件)',bash:true, margin: '0 0 30px',javascript:true},

{text: 'lugiax.bindTo',weight:600},
{text: '双向绑定，并且可以动态生成 `mutation`。',margin: '0 0 5px'},
{text:'lugiax.bindTo(\n' +
Expand Down
6 changes: 3 additions & 3 deletions src/mega/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,15 +227,15 @@ export default class Mega extends React.Component {
<Tittle5>欢迎使用 Lugia Mega</Tittle5>
<Tittle2>请选择您要安装的操作系统</Tittle2>
<DownLoadBox>
<Mac href="http://192.168.102.73:8081/publicgroup/big-frontend/lugia-release-doc/raw/lugia-1.1/%E5%AE%89%E8%A3%85%E5%8C%85/mac/LugiaMega-V1.1.0.dmg">
<Mac href="https://github.com/lugia-ysstech/lugia/releases/download/v1.1.1/LugiaMega-1.1.1.dmg">
<MacLogo />
<Span>mac版本</Span>
</Mac>
<Window href="http://192.168.102.73:8081/publicgroup/big-frontend/lugia-release-doc/raw/lugia-1.1/%E5%AE%89%E8%A3%85%E5%8C%85/windows/LugiaMegaV1.1.0.exe">
<Window href="https://github.com/lugia-ysstech/lugia/releases/download/v1.1.1/LugiaMega.Setup.1.1.1.exe">
<WindowLogo />
<Span>windows版本</Span>
</Window>
<DownLoad href="http://192.168.102.73:8081/publicgroup/big-frontend/lugia-release-doc/raw/lugia-1.1/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C/lugiav1.1.0-%E7%94%A8%E6%88%B7%E6%89%8B%E5%86%8C%20%E4%B8%AD%E6%96%87%EF%BC%88%E7%AE%80%EF%BC%89.pdf">
<DownLoad href="https://github.com/lugia-ysstech/lugia/raw/master/doc/lugia-v1.1.0-%E7%94%A8%E6%88%B7%E6%89%8B%E5%86%8C%20%E4%B8%AD%E6%96%87%EF%BC%88%E7%AE%80%EF%BC%89.pdf">
<IconSpan>
<Icon
iconClass="lugia-icon-financial_pdf"
Expand Down

0 comments on commit 9468de1

Please sign in to comment.