for learning code

project/src/mobx/apiFunction.js

@@ -5,14 +5,22 @@ const showPop1 = () => {
 
 }
 
-const showPop2 = () => {
+export const showPop2 = () => {
   
 }
 
-const test01 = (num) => {
-  popState.popStateAdd(num)
+export const testGet = () => {
+  return popState.testNum
+}
+
+export const testComputed = (num) => {
+  // console.log()
+  return popState.computed4test
+}
+
+export const testSet = (num) => {
+  return popState.add(num)
 }
 
 // export default showPop1
 // export default showPop2
\ No newline at end of file
-export default test01
\ No newline at end of file

project/src/mobx/index.js

-export { default as AUPOP } from './apiFunction'
\ No newline at end of file
+export * as AUPOP from './apiFunction'
\ No newline at end of file

project/src/mobx/mobxState.js

@@ -8,6 +8,7 @@ class PopState {
   constructor() {
     makeAutoObservable(this, {
       nowShow: observable,
+      testNum: observable,
       computed4test: computed,
       add: action
     })
@@ -18,21 +19,17 @@ class PopState {
   popArr = []
 
   add = (num) => {
-    this.nowShow += num
+    this.testNum += num
   }
 
-  computed4test = () => {
-    console.log('nowShow is: ', this.nowShow)
-    return `nowShow is : ${this.nowShow}`
+  testNum = 0
+
+  get computed4test () {
+    console.log('testNum is: ', this.testNum)
+    return `testNum is : ${this.testNum}`
   }
 }
 
 const AUPopState = new PopState()
 
-const popStateAdd = (num) => {
-  AUPopState.add(num)
-}
-
-export default {
-  popStateAdd
-}
+export default AUPopState

project/src/pages/PageHome/PageHome.jsx

@@ -62,7 +62,10 @@ class PageHome extends Component {
   }
 
   mobxAction01 = () => {
-    AUPOP.test01(1)
+    console.log('AUPOP is: ', AUPOP)
+    AUPOP.testSet(1)
+    console.log('AUPOP.testGet:::::  ', AUPOP.testGet())
+    console.log('AUPOP.testComputed:::::  ', AUPOP.testComputed())
   }
 
   openColorful = () => {