1.mobx是一個輕量級的狀態管理器，所以很簡單(單一全域性資料使用class)類有get 資料方法

我們需要把資料做成全域性資料，並且這個資料不能汙染全域性資料 -- 應該是一個閉包(ES6 中class是一個語法糖，本身是一個函式)

所以應該定義一個類，然後匯出一個例項（因為資料要全域性通用，所以不能匯出類，應該匯出例項 -- 單例模式）

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

class Store{
  //在mobx6.x版本中，需要在建構函式中宣告資料型別
  constructor(){
     makeObservable(
    
 
//指定目標
    this,
   //定義當前mobx類物件中的資料型別
  {
    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方法，在使用的時候是一個數據
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是匯出類

輕量級狀態管理器 mobx

mobx是一個可伸縮的、輕量級（與資料複雜度有關的一個指標）的狀態管理器

在專案中有一些資料需要全域性管理(資料存在共用 -- 比如token、使用者資訊，資料存在傳遞、可快取性)

使用一個庫或則一個技術：

  首先要考慮業務 -- 陣列資料 -- 購物車陣列([{key:唯一標識，name:產品名字,price:產品單價，count：數量}]) -- 可以修改數量方法(add/munis需要傳遞每次減少數量，傳遞一個唯一標識) -- 購物車計算總價格(amount,每次資料變化都要重新計算)

  使用庫 -> 安裝：cnpm i -S mobx mobx-react (mobx的5.X和6.X，他們的使用方法和方法名字等區別很多，幾乎沒有任何共同點)

開發過程：還原一個購物車頁面，一切皆元件，最小化到一個元素（因為react是沒有做元件重新渲染優化 - - 賦值和渲染優化是有的）

    標籤元件 + 按鈕元件 => 組成一個行元件 =>組成一個列表元件 => 形成一個購物車頁面元件 => 掛載到專案元件 => index的render方法上

注入使用：在其他元件上使用

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是純函式 裡面是資料state ， observer是觀察方法 裡面是元件

 二、主要技術實現：

1.mobx下載安裝使用

2.用class類做全域性資料例項， new匯出例項物件

3.a.引入store資料例項物件， -- 它的原理還是react的Context原理，import {Provider} from 'mobx-react'

b.使用Provider來包裹元件進行跨元件傳值 <Provider><App/></Provider>

4.取mobx中的資料，使用注入(inject)手段 import {inject} from 'mobx-react'

a.inject是純函式：它會直接指定要注入到Provider提供的那個屬性就行了，需要加形參就可以使用資料 function List(){return()}

const NewList = inject('cart')(List)   --->資料  - -> 元件名 ===>用時給元件直接加資料形參就直接使用 下發資料

export default NewList    

b.下發資料時使用繫結語法來展開資料

5.mobx 6.x版本

a.建構函式宣告資料型別

constructor(){

  makeObservable(

 //指向

this,

{    //定義當前mobx類物件中資料型別

  list:observable,

  add:action,

  minus:action,

  amount:computed

})

}

b.給頁面元件新增監聽屬性 是給資料新增屬性 import {cart,observer} from 'react-mobx'

let ObersverComponent = observer(List)

export default inject('cart')(observerCompent)

是用來觀察cart中的可被觀察的資料物件是否被髮生變化，如果發生變化，那麼執行頁面重新執行渲染資料

mobx 特點：全域性資料修改方法監聽，有動作傳參有修改，注入資料使用inject注入給元件使用資料，當前頁面渲染初始化資料形參使用，

監聽修改用屬性observer（cart）