博客：小程序的《全局数据共享》

简介

解决组件间通信： MobX

安装MobX相关的包

npm i--save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

构建npm

构建之前先把目录中的miniprogram_npm删除再来重新构建npm

1. 删除

2. npm

3. 检查成功

创建store实例并定义计算属性和actions方法

1. 创建store文件并导出

import { observable }  from 'mobx-miniprogram'
export const store = observable({})

2. 挂载共享数据

num1:1,
num2:2

3. 定义计算属性

 get sum(){
    return this.num1 + this.num2
  }//只读 不能赋值给让

4. actions方法 修改store，跟vuex类似

 updateNum1:action(function (step){
    this.sum1 += step
  }),
  updateNum2:action(function (step){
    this.sum2 += step
  })

使用store成员

接下来我们进入页面.js文件中

1. 导入

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

2. onLoad 函数里写页面监听加载、onReady里调用detoryStoreBindings这个方法

 onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:[],
      actions:[]
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.storeBindings.detoryStoreBindings()
  },

3. 把store的成员绑定过来，通过fields和actions

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

4. 页面渲染store成员

<view>{{num1}}+{{num2}}={{sum}}</view>
  // data-step传递过去 1|-1 ，让store.js中的方法 +=num1 来更新，这里绑定方法
<van-button type="priary" bindtap="btn1" data-step="{{1}}">num1+1</van-button>
<van-button type="danger" bindtap="btn1" data-step="{{-1}}">num1-1</van-button>

btn1(e){
    console.log(e);
  // 打印出型参，看看包含什么...
  //这时，直接调用updateNum1方法即可
    this.updateNum1(e.target.dataset.step)
  },

在组件中使用store的成员

5. app.json引入组件

"my-numbers":"./conponents/numbers/numbers" //app.json
<my-numbers>123</my-numbers>//页面中使用 

6. 同样，在组件.js文件中按需导入才能使用

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

behaviors:[storeBindingsBehavior], //component中与data平级

7. 声明数据源

// behaviors下边同级声明
storeBindings:{
    // 数据源
    store,
    fields:{
      num1:'num1', //引号内代表"store里的num1"=>相当于 num1:()=>store.num1
      num2:'num2',
      sum:'sum'
    },
    actions:{
      updateNum2:'updateNum2'
    }
  },

8. 组件中使用，组件.wxml

<view>{{num1}}+{{num2}}={{sum}}</view>
<van-button type="priary" bindtap="btn2" data-step="{{1}}">num2+1</van-button>
<van-button type="danger" bindtap="btn2" data-step="{{-1}}">num2-1</van-button>

methods: {
    btn2(e){
        this.updateNum2(e.target.dataset.step)
    }
  }

9. 至此，可以发现 ”一变则变“，页面中的数据全部改变，这就是共享数据~~