mobx中的computed实现

最新推荐文章于 2024-04-26 22:35:19 发布

前端小趴菜

最新推荐文章于 2024-04-26 22:35:19 发布

阅读量589

点赞数

分类专栏： react.js 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/xjx0121/article/details/125397130

版权

react.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文展示了如何利用MobX库在JavaScript中创建一个数据存储类，定义计算属性来过滤数据，并通过makeAutoObservable方法实现数据的自动观察。在React组件中，使用observer装饰器将组件与数据绑定，实现实时更新。当点击按钮向数组添加值时，过滤后的数据列表会自动更新。

摘要由CSDN通过智能技术生成

1.定义一个数据

2.定义get属性，编写一个计算公式

3.在makeAutoObservable方法中进行标记

代码示例：

countes.js

//导入computed属性
import { computed, makeAutoObservable } from 'mobx'

class CountesStore {
  // 1.定义数据
  list = [1, 2, 3, 4, 5, 6]
  // 3.标记该计算属性
  constructor() {
    makeAutoObservable(this, {
      filterList: computed
    })
  }
  // 2.计算属性-定义一个方法，筛选出大于三的数据
  get filterList () {
    return this.list.filter(item => item > 3)
  }
  
  addList = () => {
    this.list.push(0, 7, 8)
  }

}

// 4.实例化并将实例导出
const countesStore = new CountesStore()

export { countesStore }

渲染数据App.js

// 1.countesStore
import { countesStore } from './store/countes'
// 2.导入中间连接件，使数据完成响应式
import { observer } from 'mobx-react-lite'
function App () {
  return (
    <div className="App">
      {/* 渲染数据 */}
      <p>
        {countesStore.filterList.join('-')}
      </p>

      {/* 对数据进行修改 */}
      <button onClick={countesStore.addList}>list数组添加值</button>
    </div>
  )
}

// 包裹App组件
export default observer(App)