diff --git a/practise/33.Mobx/1.mobx介绍.png b/practise/33.Mobx/1.mobx介绍.png
new file mode 100644
index 0000000..73fc33c
Binary files /dev/null and b/practise/33.Mobx/1.mobx介绍.png differ
diff --git a/practise/33.Mobx/2.mobx优势.png b/practise/33.Mobx/2.mobx优势.png
new file mode 100644
index 0000000..efc4f98
Binary files /dev/null and b/practise/33.Mobx/2.mobx优势.png differ
diff --git a/practise/33.Mobx/3.mobx环境配置.png b/practise/33.Mobx/3.mobx环境配置.png
new file mode 100644
index 0000000..55eab78
Binary files /dev/null and b/practise/33.Mobx/3.mobx环境配置.png differ
diff --git a/practise/33.Mobx/4.mobx环境配置2.png b/practise/33.Mobx/4.mobx环境配置2.png
new file mode 100644
index 0000000..0ad56cd
Binary files /dev/null and b/practise/33.Mobx/4.mobx环境配置2.png differ
diff --git a/practise/33.Mobx/5.store/1.store案例需求.png b/practise/33.Mobx/5.store/1.store案例需求.png
new file mode 100644
index 0000000..570ca44
Binary files /dev/null and b/practise/33.Mobx/5.store/1.store案例需求.png differ
diff --git a/practise/33.Mobx/5.store/2.步骤1（初始化mobx）.png b/practise/33.Mobx/5.store/2.步骤1（初始化mobx）.png
new file mode 100644
index 0000000..be06bc5
Binary files /dev/null and b/practise/33.Mobx/5.store/2.步骤1（初始化mobx）.png differ
diff --git a/practise/33.Mobx/5.store/3.步骤2（连接react）.png b/practise/33.Mobx/5.store/3.步骤2（连接react）.png
new file mode 100644
index 0000000..27452f7
Binary files /dev/null and b/practise/33.Mobx/5.store/3.步骤2（连接react）.png differ
diff --git a/practise/33.Mobx/5.store/counter.js b/practise/33.Mobx/5.store/counter.js
new file mode 100644
index 0000000..fbe4f3e
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/practise/33.Mobx/5.store/index.js b/practise/33.Mobx/5.store/index.js
new file mode 100644
index 0000000..d9d1bd1
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/practise/33.Mobx/6.computed/counter.js b/practise/33.Mobx/6.computed/counter.js
new file mode 100644
index 0000000..2fe5ae2
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/practise/33.Mobx/6.computed/index.js b/practise/33.Mobx/6.computed/index.js
new file mode 100644
index 0000000..fff6eb4
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/practise/33.Mobx/6.computed/实现步骤.png b/practise/33.Mobx/6.computed/实现步骤.png
new file mode 100644
index 0000000..d664021
Binary files /dev/null and b/practise/33.Mobx/6.computed/实现步骤.png differ
diff --git a/practise/33.Mobx/7.mobx模块化/1.mobx模块化.png b/practise/33.Mobx/7.mobx模块化/1.mobx模块化.png
new file mode 100644
index 0000000..fca51fb
Binary files /dev/null and b/practise/33.Mobx/7.mobx模块化/1.mobx模块化.png differ
diff --git a/practise/33.Mobx/7.mobx模块化/2.步骤.png b/practise/33.Mobx/7.mobx模块化/2.步骤.png
new file mode 100644
index 0000000..80f890a
Binary files /dev/null and b/practise/33.Mobx/7.mobx模块化/2.步骤.png differ
diff --git a/practise/33.Mobx/7.mobx模块化/3.实例化root并封装统一useStore方法.png b/practise/33.Mobx/7.mobx模块化/3.实例化root并封装统一useStore方法.png
new file mode 100644
index 0000000..564b970
Binary files /dev/null and b/practise/33.Mobx/7.mobx模块化/3.实例化root并封装统一useStore方法.png differ
diff --git a/practise/33.Mobx/mobx基础总结.png b/practise/33.Mobx/mobx基础总结.png
new file mode 100644
index 0000000..185be2c
Binary files /dev/null and b/practise/33.Mobx/mobx基础总结.png differ