React中mobx的使用

// observable 可被观察的，用于定义可共享的数据
// action 相当于Vuex中的 mutations + actions，用于定义改变state的方法

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

class TodoList {
  constructor () {
    makeObservable(this, {
      list: observable
    })
  }
  list = [
    { id: 1, task: '睡觉'},
    { id: 2, task: ' 打豆豆'}
  ]
  addTodo (payload) {
    this.list.push({
      id: Date.now(),
      task:payload
    })
    console.log("this.list==-==", this.list)
  }
  delTodo (payload) {
    this.list.splice(payload, 1)
  }
}
export default TodoList

在全局数据index.js 中引入

import { observable } from 'mobx'
import Todo from './modules/TodoList'
class Store {
  constructor () {
    this.todo = new Todo()
  }
}

export default new Store()

在App.js中的使用

// 使用mobx状态管理数据
import { Provider } from 'mobx-react'
import store from '@/store'
<Provider store={store}></Provider>