chore: add combine stores demo

2019-10-06 22:34:13 +08:00 · 2019-10-06 22:34:13 +08:00 · b4a309ed89
parent 97de1b8dba
commit b4a309ed89
4 changed files with 2007 additions and 0 deletions
--- a/packages/omi/examples/stores/b.js
+++ b/packages/omi/examples/stores/b.js
--- a/packages/omi/examples/stores/b.js.map
+++ b/packages/omi/examples/stores/b.js.map
--- a/packages/omi/examples/stores/index.html
+++ b/packages/omi/examples/stores/index.html
@ -0,0 +1,16 @@
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+	<meta charset="UTF-8" />
+  	<title>Counter</title>
+</head>
+
+<body>
+	<script src="b.js"></script>
+	<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
+		<img src="//alloyteam.github.io/github.png" alt="">
+	</a>
+</body>
+
+</html>
--- a/packages/omi/examples/stores/main.js
+++ b/packages/omi/examples/stores/main.js
@ -0,0 +1,73 @@
+import { render, WeElement, define } from '../../src/omi'
+
+define('my-counter', class extends WeElement {
+  use = {
+		storeA: ['count', 'adding']
+	}
+
+  addIfOdd = () => {
+    if (this.storeA.data.count % 2 !== 0) {
+      this.storeA.add()
+    }
+  }
+
+  addAsync = () => {
+    this.storeA.data.adding = true
+    setTimeout(() => {
+      this.storeA.data.adding = false
+      this.storeA.add()
+    }, 1000)
+  }
+
+  render() {
+    const store = this.storeA
+    const { data, add, sub } = store
+    return (
+      <p>
+        Clicked: {data.count} times
+        {' '}
+        <button onClick={add}>+</button>
+        {' '}
+        <button onClick={sub}>-</button>
+        {' '}
+        <button disabled={data.count % 2 === 0} onClick={this.addIfOdd}>
+          Add if odd
+        </button>
+        {' '}
+        <button disabled={data.adding} onClick={this.addAsync}>
+          Add async
+        </button>
+      </p>
+    )
+  }
+})
+
+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'
+  }
+}
+
+function combine(options) {
+	options.__combine_ = true
+	return options
+}
+
+render(<my-counter />, 'body', combine({ storeA, storeB }) )