mobx设定的store成员为map对象时的一些踩坑记录

背景

最近尝试在taro里使用mobx进行状态管理，因为某些不查文档的恶习，导致一开始在外部引用store的时候无法及时拿到最新的状态，只能在page里重复设置useState来管理状态，同时把数据同步到store里。因为用mobx进行状态管理时，无法对数组进行越界赋值，不然会报错，但个人业务里不可避免要涉及到越界赋值……于是就想到用map来代替数组

mobx里map对象的定义及使用

定义

根据官方文档，如果通过 ES6 Map 构造函数，可以使用 observable(new Map()) 或使用装饰器 @observable map = new Map() 的类属性来初始化 observable 映射，也就是说不能单纯地初始化为new Map()，还需要用observable修饰

使用

除了原生map可以使用的一些方法外，因为用observable修饰的map对象变成了observable映射，有时候需要转化为普通格式才能正常使用，mobx就提供了一些其他的方法 使用方法见：3.5. maps · MobX 中文文档

个人踩到的坑

1. 没用observable修饰map对象成员，导致其他地方引用这个map对象成员保存的store时没有及时更新
2. 在使用oberservable修饰map对象成员后，有时直接访问并返回该成员时并不是普通映射

import {observable} from 'mobx';

const personInfoStore = observable({
    // 用observable修饰map对象
    _diseaseIndex: observable(new Map()),   // diseaseIndex每个值都是数组
    _status:observable(new Map()),    // status每个值都是字符串

    counterStore(){
    },
    setDiseaseIndex(index:string, diseaseList:string[]):void{
        this._diseaseIndex.set(index,diseaseList);
    },
    setStatus(index:number,status:number){
        this._status.set(index,status);
    },
    getDiseaseIndex(index:string){
        return this._diseaseIndex.has(index)?this._diseaseIndex.get(index).toJS():[];   // 不加toJS()，会得到一个ObservableArray对象，需要使用mobx提供的toJS()方法将其转化为可读的数组
    },
    getStatus(index:number){
        return this._status.has(index)?this._status.get(index):'';
        // 得到的是字符串，可以直接返回
    }
})

export default personInfoStore;