微信小程序 全局数据共享 Mobx

1、首先安装MOBX

在项目所在目录下，右键选择【在外部终端窗口中打开】，运行：

npm install  --save  [email protected]  [email protected]

成功之后，在微信开发者工具中点击【工具】-【构架npm】，到此安装工作完成。

2、将需要共享的数据放在一个store.js文件中，导入mobx-miniprogram，需要共享的数据有字段num1,num2,方法sum()，updateNum1，updateNum2，注意：需要更改共享数据的方法使用：action修饰

import {
  observable,
  action
} from 'mobx-miniprogram'
export const store = observable({
  num1: 1,
  num2: 2,
  get sum() {
    return this.num1 + this.num2
  },
  updateNum1: action(function (step) {
    this.num1 = this.num1 + step
  }),
  updateNum2: action(function (step) {
    this.num2 = this.num2 + step
  })
})

3、在页面中引用store

首先导入mobx-miniprogram-bindings

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

在onLoad生命周期函数中

onLoad(options) {
    this.storeBindings = createStoreBindings(this,
      {
        store,
        fields:['num1','num2','sum'],
        actions:['updateNum1','updateNum2']
      })
  }

在onUnload生命周期函数中

onUnload() {

    this.storeBindings.detroyStoreBindings()

  }

4、页面上显示共享数据：

wxml文件：

+1
+1
num1:{{num1}}+num2:{{num2}}={{sum}}

在事件中就可以使用共享的方法：

 addNum1(e){
    console.log(e)
    this.updateNum1(e.target.dataset.step)
  }

如何在组件中使用共享数据呢？

在组件的js文件中导入mobx-miniprogram-bindings，然后在Component节点中声明数据。组件和上述页面引入mobx-miniprogram-bindings是不同的

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      num1:'num1',
      num2:'num2',
      sum:'sum'
    },
    actions:{
      updateNum1:'updateNum1',
      updateNum2:'updateNum2'
    }
  }
}

在组件中显示共享数据方式与页面显示数据方式相同，在此不再赘述。