docs: readme
This commit is contained in:
dntzhang
parent
974c7ce962
commit
63039d9c31
226
README.CN.md
226
README.CN.md
|
|
@ -263,232 +263,6 @@ export default class Button extends WeElement<Props>{
|
|||
[omiu-dialog-extention-docs]: https://tencent.github.io/omi/components/docs/cn.html#/dialog-extention
|
||||
[omiu-dialog-extention-codepen]: https://codepen.io/omijs/pen/GRpOBmL
|
||||
|
||||
## 快速概览
|
||||
|
||||
整个组件树共享数据，并且数据变更自动更新视图。
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//或者使用 useSelf, useSelf 只会更新自身，不更新子组件
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
* `<my-counter></my-counter>` 可以用于任意框架或者无框架，比如 `document.createElement('my-counter')`
|
||||
|
||||
|
||||
你也可以使用 `useSelf`, `useSelf` 只会更新自身，不更新子组件。使用 `useSelf` 的时候在 JSX 里通过 `usingSelf` 访问对应属性。
|
||||
|
||||
你也可以通过 `compute` 去实现 `computed` 计算属性，比如:
|
||||
|
||||
```jsx
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
<div>Double: {_.computed.doubleCount}</div>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
路径也是支持的，比如下面的例子:
|
||||
|
||||
```js
|
||||
class Store {
|
||||
data = {
|
||||
list: [
|
||||
{ name: { first: 'dnt', last: 'zhang' } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
...
|
||||
...
|
||||
|
||||
define('my-counter', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: [
|
||||
'list[0].name', //可以通过 this.using[0] 访问
|
||||
],
|
||||
compute: {
|
||||
fullName() {
|
||||
return this.list[0].name.first + this.list[0].name.last
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 多个 store 注入
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
}
|
||||
})
|
||||
|
||||
const storeA = new class Store {
|
||||
data = {
|
||||
count: 0,
|
||||
adding: false
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
const storeB = new class Store {
|
||||
data = {
|
||||
msg: 'abc'
|
||||
}
|
||||
changeMsg = () => {
|
||||
this.data.msg = 'bcd'
|
||||
}
|
||||
}
|
||||
|
||||
render( <my-app /> , 'body', {
|
||||
storeA,
|
||||
storeB
|
||||
})
|
||||
```
|
||||
|
||||
怎么在注入多 store 的时候使用 `compute` and `computed`? 非常简单：
|
||||
|
||||
```jsx
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>{_.computed.dobuleCount}</div>
|
||||
<div>{_.computed.reverseMsg}</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
},
|
||||
compute: {
|
||||
dobuleCount() {
|
||||
return this.storeA.data.count * 2
|
||||
},
|
||||
reverseMsg() {
|
||||
return this.storeB.data.msg.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### API 和 钩子
|
||||
|
||||
```jsx
|
||||
define('my-component', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: ['path', 'path.a', 'path[1].b'],
|
||||
useSelf: ['path.c', 'path[1].d'],
|
||||
css: 'h1 { color: red; }',
|
||||
propTypes: { },
|
||||
defaultProps: { },
|
||||
isLightDom: true, //default is false
|
||||
|
||||
//生命周期
|
||||
install() { },
|
||||
installed() { },
|
||||
uninstall() { },
|
||||
receiveProps() { },
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
beforeRender() { },
|
||||
rendered() { },
|
||||
|
||||
//自定义方法
|
||||
myMethodA() { },
|
||||
myMethodB() { }
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
### 通过 prop 注入 use 或 useSelf
|
||||
|
||||
```jsx
|
||||
<my-counter use={['count']} ></my-counter>
|
||||
```
|
||||
|
||||
## Omi 生态
|
||||
|
||||
|
|
|
|||
231
README.md
231
README.md
|
|
@ -261,237 +261,6 @@ export default class Button extends WeElement<Props>{
|
|||
[omiu-dialog-extention-docs]: https://tencent.github.io/omi/components/docs/index.html#/dialog-extention
|
||||
[omiu-dialog-extention-codepen]: https://codepen.io/omijs/pen/GRpOBmL
|
||||
|
||||
## Quick Preview
|
||||
|
||||
Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand.
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
* `<my-counter></my-counter>` can be used in any framework or no framework, such as `document.createElement('my-counter')`
|
||||
|
||||
You can also use `useSelf`, `useSelf` only updates itself. When using `useSelf`, the corresponding attributes are accessed through `usingSelf` in JSX.
|
||||
|
||||
You can also implement `computed` props through `compute`, such as:
|
||||
|
||||
```jsx
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
<div>Double: {_.computed.doubleCount}</div>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Path is also supported:
|
||||
|
||||
```js
|
||||
class Store {
|
||||
data = {
|
||||
list: [
|
||||
{ name: { first: 'dnt', last: 'zhang' } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
...
|
||||
...
|
||||
|
||||
define('my-counter', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: [
|
||||
'list[0].name', //Direct string path dep, accessible through this.using[0]
|
||||
],
|
||||
compute: {
|
||||
fullName() {
|
||||
return this.list[0].name.first + this.list[0].name.last
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Multi-store injection
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
}
|
||||
})
|
||||
|
||||
const storeA = new class Store {
|
||||
data = {
|
||||
count: 0,
|
||||
adding: false
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
const storeB = new class Store {
|
||||
data = {
|
||||
msg: 'abc'
|
||||
}
|
||||
changeMsg = () => {
|
||||
this.data.msg = 'bcd'
|
||||
}
|
||||
}
|
||||
|
||||
render( <my-app /> , 'body', {
|
||||
storeA,
|
||||
storeB
|
||||
})
|
||||
```
|
||||
|
||||
How to Multi-store injection with `compute` and `computed`? Very simple:
|
||||
|
||||
```jsx
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>{_.computed.dobuleCount}</div>
|
||||
<div>{_.computed.reverseMsg}</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
},
|
||||
compute: {
|
||||
dobuleCount() {
|
||||
return this.storeA.data.count * 2
|
||||
},
|
||||
reverseMsg() {
|
||||
return this.storeB.data.msg.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### API and Hooks
|
||||
|
||||
```jsx
|
||||
define('my-component', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: ['count', 'path.a', 'path[1].b'],
|
||||
useSelf: ['path.c', 'path[1].d'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
},
|
||||
css: 'h1 { color: red; }',
|
||||
propTypes: { },
|
||||
defaultProps: { },
|
||||
isLightDom: true, //default is false
|
||||
|
||||
//life cycle
|
||||
install() { },
|
||||
installed() { },
|
||||
uninstall() { },
|
||||
receiveProps() { },
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
beforeRender() { },
|
||||
rendered() { },
|
||||
|
||||
//custom methods
|
||||
myMethodA() { },
|
||||
myMethodB() { }
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
### Inject use or useSelf through prop
|
||||
|
||||
```jsx
|
||||
<my-counter use={['count']} ></my-counter>
|
||||
```
|
||||
|
||||
## Ecosystem of Omi
|
||||
|
||||
#### :100:Base
|
||||
|
|
|
|||
|
|
@ -7,6 +7,239 @@ Store is Omi's built-in centralized data warehouse, which solves and provides th
|
|||
|
||||
|
||||
|
||||
|
||||
## Quick Preview
|
||||
|
||||
Pass data through the component tree without having to pass props down manually at every level by store, auto update the view on demand.
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
* `<my-counter></my-counter>` can be used in any framework or no framework, such as `document.createElement('my-counter')`
|
||||
|
||||
You can also use `useSelf`, `useSelf` only updates itself. When using `useSelf`, the corresponding attributes are accessed through `usingSelf` in JSX.
|
||||
|
||||
You can also implement `computed` props through `compute`, such as:
|
||||
|
||||
```jsx
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
<div>Double: {_.computed.doubleCount}</div>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Path is also supported:
|
||||
|
||||
```js
|
||||
class Store {
|
||||
data = {
|
||||
list: [
|
||||
{ name: { first: 'dnt', last: 'zhang' } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
...
|
||||
...
|
||||
|
||||
define('my-counter', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: [
|
||||
'list[0].name', //Direct string path dep, accessible through this.using[0]
|
||||
],
|
||||
compute: {
|
||||
fullName() {
|
||||
return this.list[0].name.first + this.list[0].name.last
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Multi-store injection
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
}
|
||||
})
|
||||
|
||||
const storeA = new class Store {
|
||||
data = {
|
||||
count: 0,
|
||||
adding: false
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
const storeB = new class Store {
|
||||
data = {
|
||||
msg: 'abc'
|
||||
}
|
||||
changeMsg = () => {
|
||||
this.data.msg = 'bcd'
|
||||
}
|
||||
}
|
||||
|
||||
render( <my-app /> , 'body', {
|
||||
storeA,
|
||||
storeB
|
||||
})
|
||||
```
|
||||
|
||||
How to Multi-store injection with `compute` and `computed`? Very simple:
|
||||
|
||||
```jsx
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>{_.computed.dobuleCount}</div>
|
||||
<div>{_.computed.reverseMsg}</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
},
|
||||
compute: {
|
||||
dobuleCount() {
|
||||
return this.storeA.data.count * 2
|
||||
},
|
||||
reverseMsg() {
|
||||
return this.storeB.data.msg.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### API and Hooks
|
||||
|
||||
```jsx
|
||||
define('my-component', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: ['count', 'path.a', 'path[1].b'],
|
||||
useSelf: ['path.c', 'path[1].d'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
},
|
||||
css: 'h1 { color: red; }',
|
||||
propTypes: { },
|
||||
defaultProps: { },
|
||||
isLightDom: true, //default is false
|
||||
|
||||
//life cycle
|
||||
install() { },
|
||||
installed() { },
|
||||
uninstall() { },
|
||||
receiveProps() { },
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
beforeRender() { },
|
||||
rendered() { },
|
||||
|
||||
//custom methods
|
||||
myMethodA() { },
|
||||
myMethodB() { }
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
### Inject use or useSelf through prop
|
||||
|
||||
```jsx
|
||||
<my-counter use={['count']} ></my-counter>
|
||||
```
|
||||
|
||||
|
||||
## A piece of code is completely ready for Store
|
||||
|
||||
```jsx
|
||||
|
|
@ -229,3 +462,5 @@ render(<my-counter />, 'body', new Store)
|
|||
```
|
||||
|
||||
Very flexible!
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,234 @@ Store 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题
|
|||
|
||||
|
||||
|
||||
|
||||
## 快速概览
|
||||
|
||||
整个组件树共享数据，并且数据变更自动更新视图。
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//或者使用 useSelf, useSelf 只会更新自身，不更新子组件
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
* `<my-counter></my-counter>` 可以用于任意框架或者无框架，比如 `document.createElement('my-counter')`
|
||||
|
||||
|
||||
你也可以使用 `useSelf`, `useSelf` 只会更新自身，不更新子组件。使用 `useSelf` 的时候在 JSX 里通过 `usingSelf` 访问对应属性。
|
||||
|
||||
你也可以通过 `compute` 去实现 `computed` 计算属性，比如:
|
||||
|
||||
```jsx
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
<div>Double: {_.computed.doubleCount}</div>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
compute: {
|
||||
doubleCount() {
|
||||
return this.count * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
路径也是支持的，比如下面的例子:
|
||||
|
||||
```js
|
||||
class Store {
|
||||
data = {
|
||||
list: [
|
||||
{ name: { first: 'dnt', last: 'zhang' } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
...
|
||||
...
|
||||
|
||||
define('my-counter', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: [
|
||||
'list[0].name', //可以通过 this.using[0] 访问
|
||||
],
|
||||
compute: {
|
||||
fullName() {
|
||||
return this.list[0].name.first + this.list[0].name.last
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 多个 store 注入
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
}
|
||||
})
|
||||
|
||||
const storeA = new class Store {
|
||||
data = {
|
||||
count: 0,
|
||||
adding: false
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
const storeB = new class Store {
|
||||
data = {
|
||||
msg: 'abc'
|
||||
}
|
||||
changeMsg = () => {
|
||||
this.data.msg = 'bcd'
|
||||
}
|
||||
}
|
||||
|
||||
render( <my-app /> , 'body', {
|
||||
storeA,
|
||||
storeB
|
||||
})
|
||||
```
|
||||
|
||||
怎么在注入多 store 的时候使用 `compute` and `computed`? 非常简单：
|
||||
|
||||
```jsx
|
||||
define('my-app', _ => {
|
||||
const store = _.store.storeA
|
||||
const { data, add, sub } = store
|
||||
return (
|
||||
<p>
|
||||
Clicked: {data.count} times
|
||||
<button onClick={add}>+</button>
|
||||
<button onClick={sub}>-</button>
|
||||
|
||||
<div>
|
||||
{_.store.storeB.data.msg}
|
||||
<button onClick={_.store.storeB.changeMsg}>
|
||||
change storeB's msg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>{_.computed.dobuleCount}</div>
|
||||
<div>{_.computed.reverseMsg}</div>
|
||||
</p>
|
||||
)
|
||||
}, {
|
||||
useSelf: {
|
||||
storeA: ['count', 'adding'],
|
||||
storeB: ['msg']
|
||||
},
|
||||
compute: {
|
||||
dobuleCount() {
|
||||
return this.storeA.data.count * 2
|
||||
},
|
||||
reverseMsg() {
|
||||
return this.storeB.data.msg.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### API 和 钩子
|
||||
|
||||
```jsx
|
||||
define('my-component', _ => (
|
||||
...
|
||||
...
|
||||
), {
|
||||
use: ['path', 'path.a', 'path[1].b'],
|
||||
useSelf: ['path.c', 'path[1].d'],
|
||||
css: 'h1 { color: red; }',
|
||||
propTypes: { },
|
||||
defaultProps: { },
|
||||
isLightDom: true, //default is false
|
||||
|
||||
//生命周期
|
||||
install() { },
|
||||
installed() { },
|
||||
uninstall() { },
|
||||
receiveProps() { },
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
beforeRender() { },
|
||||
rendered() { },
|
||||
|
||||
//自定义方法
|
||||
myMethodA() { },
|
||||
myMethodB() { }
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
### 通过 prop 注入 use 或 useSelf
|
||||
|
||||
```jsx
|
||||
<my-counter use={['count']} ></my-counter>
|
||||
```
|
||||
|
||||
## 一段代码完全上手 Store
|
||||
|
||||
```jsx
|
||||
|
|
|
|||
Loading…
Reference in New Issue