import React, { useContext } from "react";
import DemoStore from "./DemoStore";
class RootStore {
  constructor() {
    this.demoStore = DemoStore;
    //如果還有其他文件，依照上面引入即可
  }
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useMobStore = () => useContext(context)
export {useMobStore};

import { makeAutoObservable, toJS } from 'mobx';
class DemoStoreData{
	number: 1; // 數(shù)據(jù)
	constructor() {
	   makeAutoObservable(this)
	}
	// 更新數(shù)據(jù)(此方法可以是異步的，可以在里面調(diào)完接口在更新數(shù)據(jù))
	updateNumber = (data) =>{
		this.number = data;
	}
}
const DemoStore = new DemoStoreData()
export default DemoStore;

// 導入的是 三 步驟 創(chuàng)建的index.js 文件
import { useMobStore } from "./mobx/index.js"; 
import { observer } from "mobx-react-lite";
const PageList = () => {
	// 解構的是 三 步驟里的 demoStore 
	const { demoStore } = useMobStore();
	return (
		<div>
			{demoStore.number}
		</div>
	)
}
export default observer(PageList);

import {action , computed,makeObservable,observable} from "mobx"

class Store{
  //在mobx6.x版本中，需要在構造函數(shù)中聲明數(shù)據(jù)類型
  constructor(){
     makeObservable(
    //指定目標
    this,
   //定義當前mobx類對象中的數(shù)據(jù)類型
  {
    list:observable,
    add:action,
    minus:action,
    amount:computed}
)
}
   list=Array.from(Array(8),(_,i)=>{
    return {id:'ID-'+i,name:`華為手機Mate2${i}`,price:Math.ceil(Math.random() * 2000 + 3000), count: 1}
})
//在類中，有一個getter方法，在使用的時候是一個數(shù)據(jù)
get amount(){
    return this.list.reduce((r,it)=>{
   r += it.price * it.count
   return r
},0)
}
}
add(key,step){
   console.log('-------- add',key,step)
   this.list= this.list.map(it =>{
     if(it.id === key) it.count += step
     return it
})
  console.log(this.list)
}

minus(key,step){
  console.log('---------minus',key,step)
  this.list=this.list,map(it =>{
  if(it.id === key) it.count -=step
  return it
})
}
}
export default new Store()

//new是實例對象 Store類 ，Store是導出類

import React from 'react'
import List from './List'
import {inject,observer} from 'mobx-react'
function Cart({cart}){
   return(
  <div>
  <h1>{cart.amount}</h1>
</div>
)
} 
export default inject('cart')(observer(Cart))
//inject是純函數(shù) 里面是數(shù)據(jù)state ， observer是觀察方法 里面是組件

constructor(){
  makeObservable(
 //指向
this,
{    //定義當前mobx類對象中數(shù)據(jù)類型
  list:observable,
  add:action,
  minus:action,
  amount:computed
})
}

let ObersverComponent = observer(List)
export default inject('cart')(observerCompent)