practise

practise/33.Mobx/5.store/counter.js

@@ -0,0 +1,23 @@
+// 初始化 mobx
+import { makeAutoObservable } from 'mobx'
+
+class CounterStore {
+    // 1.定义数据
+    count = 0
+
+    // constructor() 是构造函数 作用：1.初始化this.state  2.函数方法绑定到实例。
+    constructor() {
+        // 2. 将数据弄成响应式
+        makeAutoObservable(this)
+    }
+
+    // 3.定义 action 函数 (修改数据)
+    addCount = () => {
+        this.count++
+    }
+}
+
+// 4.实例化，然后导出给 react 使用
+const counterStore = new CounterStore()
+
+export {counterStore}

practise/33.Mobx/5.store/index.js

@@ -0,0 +1,18 @@
+// 1.导入 countStore
+import { counterStore } from './store/counter'
+// 2.导入中间件，连接mobx、react，完成响应式变化
+import { observer } from 'mobx-react-lite'
+
+function App () {
+    return (
+        <div className="App">
+            {/* 把 store 中的 count  */}
+            {counterStore.count}
+            <br />
+            {/* 点击事件触发 action 函数修改 count 值 */}
+            <button onClick={counterStore.addCount}>+</button>
+        </div>
+    )
+}
+
+export default observer(App)

practise/33.Mobx/6.computed/counter.js

@@ -0,0 +1,30 @@
+// 初始化 mobx
+import { makeAutoObservable } from 'mobx'
+
+class CounterStore {
+    // 定义一个原始数据 list
+    list = [1, 2, 3, 4, 5, 6]
+
+    // constructor() 是构造函数 作用：1.初始化this.state  2.函数方法绑定到实例。
+    constructor() {
+        //  将数据弄成响应式
+        makeAutoObservable(this)
+    } 
+
+    // 定义计算属性
+    // get() 方法通过索引值获取动态数组中的元素。
+    get filterList () {
+        return this.list.filter(item => item > 2)
+    }
+
+    // 修改 list
+    addList = () => {
+        this.list.push(7, 8, 9)
+    }
+
+}
+
+// 4.实例化，然后导出给 react 使用
+const counterStore = new CounterStore()
+
+export {counterStore}

practise/33.Mobx/6.computed/index.js

@@ -0,0 +1,17 @@
+// 1.导入 countStore
+import { counterStore } from './store/counter'
+// 2.导入中间件，连接mobx、react，完成响应式变化
+import { observer } from 'mobx-react-lite'
+
+function App () {
+    return (
+        <div className="App">
+            {/* 使用就算属性 */}
+            {counterStore.filterList.join('-')}
+            <br/>
+            <button onClick={counterStore.addList}>修改数组</button>
+        </div>
+    )
+}
+
+export default observer(App)