小程序的全局状态管理的使用步骤

1、npm下载mobx-miniprogram 与 mobx-miniprogram-bindings

• 打开小程序所在目录终端
• 下载指令:

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

• 点击小程序开发工具中 工具-构建npm 就会生成一个文件夹 (求稳就删除文件夹再重新执行一遍此操作)

2、初始化 store实例

• 新建store文件夹 新建store.js文件，编写如下代码

// 在这个js中,专门来创建store的实例对象
import { get, observable ,action} from 'mobx-miniprogram'
 
// 得到一个store的实例对象
export const store =  observable({
  // 外界导入store 就可以访问numA、numB这两个数据了 数据字段
  numA:1,
  numB:2,

  // 计算书写 就像vuex中的getter 
  // 定义的时候 在定义的方法前加一个 get 修饰符就行了
  get sum(){
    return this.numA + this.numB
  },

  // action方法 用于修改store中的数据
  // updateNum1是方法名 定义方式如下: key:action(fn)
  updateNum1:action(function(setup){
    this.numA += setup
  })
})

3、page页中使用store的数据

js部分代码:
// 导入 公共状态管理所需要的js文件 
// createStoreBindings拿到 store 对象数据的方法  store拿到整个对象
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  // 页面加载时拿到store的数据 
  // this.storeBindings接受返回值，用于在关闭页面的时候清楚拿到的公共状态,防止内存泄漏
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      // 第一个参数是要拿的对象
      store,
      // fields是指定拿到的数据(响应式) 
      fields:['numA','sum'],
      // actions拿到改变store数据的方法
      actions:['updateNum1']
    })
  },

  // 定义一个按钮事件处理方法，用于调用 actions拿到的函数
  tapHandle(){
    this.updateNum1(1)
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // 关闭页面的时候清楚拿到的公共状态,防止内存泄漏
    this.storeBindings.destroyStoreBindings
  }
})

wxml部分代码:
{{numA}}
<button bindtap="tapHandle" type="primary"> +</button>
{{sum}}

4、组件中使用store的数据

// 这是组件内部js
// 引入组件获取全局状态需要的东西
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  // 在behaviors中申明,通过storeBindingsBehavior实现自动绑定
  behaviors:[storeBindingsBehavior],

  //
  storeBindings:{
    store,//指定要绑定的store
    fields:{
      numA:()=>store.numA,//绑定获取字段的第一种方式
      numB:(store)=>store.numB,//绑定获取字段的第二种方式
      sum:'sum'   //绑定获取字段的第二种方式
    },
    // 指定要绑定的方法
    actions:{
      updateNum1:'updateNum1'
    }
  },

})