微信小程序 全局共享数据 Mobx 在页面及组件上使用

一 前言

在小程序中，常常有些数据需要在几个页面或组件中共享，对于这样的数据，在 web 开发中，有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中，也有不少朋友喜欢用 MobX 。

二 mobx 引入

npm install --save mobx-miniprogram mobx-miniprogram-bindings

npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 工具 - 构建 npm 。

三 创建store文件

在根目录下创建 store-store.js文件

import { observable, action } from 'mobx-miniprogram';

// 数据仓库
export const store = observable({
    list: [], // 天气数据（包含列表和详情）
    numA: 1,
    numB: 1,


    // 计算属性
    get sumNum() {
        return this.numA + this.numB;
    },


    // action 用来修改store中的数据
    // 设置天气列表，从网络上获取到数据之后调用
    setList: action(function (list) {
        this.list = list;
    }),
    // 修改numA
    updateNumA: action(function(val) {
        this.numA += val;
    }),
    // 修改numB
    updateNumB: action(function(val) {
        this.numB += val;
    })
  
})

四 在页面/组件上使用