【小程序开发】全局数据共享

1.全局数据共享

安装MobX相关的包

管理员cmd当前目录：

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

构建npm： 

2. 创建store实例、定义计算属性与action方法

新建文件夹store，新建文件store.js

 store.js

// 通过observable方法创建store的实例对象
//从mobx-miniprogram导出一个方法：action
import{action, observable}from'mobx-miniprogram'
// 通过es6导出语法 导出store实例对象
export const store=observable({
num1:12,
num2:23,
// 计算属性,get表示当前属性是只读的
get sum(){
  return this.num1+this.num2
},
// action函数专门用来修改数据值
updataNum1=action(function(step){
  this.num1+=step
}),
updataNum2=action(function(step){
  this.num2+=step
})
})

3.在页面使用store成员

页面.js

// 从mobx-miniprogram-bindings包里导入createStoreBindings方法
// createStoreBindings方法将store里面的数据或方法绑定到当前页面使用
import{createStoreBindings}from 'mobx-miniprogram-bindings'
// 导入store实例对象
import{store}from '../../store/store'
Page({
  onLoad:function(){
    // this表示当前页面的实例，{}表示配置对象
    // 将createStoreBindings返回值挂载到当前页面作为自定义属性存在
    this.storeBindings=createStoreBindings(this,{
      // store是数据源，将store对应的属性或方法绑定到实例上
      store,
      // fields表示绑定哪些字段到当前页面
      fields:['num1','num2','sum'],
      actions:['updataNum1']
      })
  },
  onUnload:function(){
    // destoryStoreBindings()可实现清理工作
    this.storeBindings.destoryStoreBindings()
  },
  btnhander1(e){
    console.log(e);
    this.updataNum1(e.target.dataset.step)
  }

  })

页面.wxml

<!--index.wxml-->
<!-- bind:自定义事件名称="方法名字" -->
<view>{{num1}}+{{num2}}={{sum}}</view>
<!-- data-step="1"绑定步长值 -->
<van-button type="primary" bind:tap="btnhander1" data-step="{{1}}">num1+1</van-button>
<van-button type="danger" bind:tap="btnhander1" data-step="{{-1}}">num2-1</van-button>

效果：

问题：运行出错

原因：

1.输入符号错误或''中有多余空格

2.清除缓存

3.

调低版本 

4.重新编译或重启程序

总结：编译遇到多个错误先检查2遍代码

4.在组件中使用store成员

在components文件中新建numbers文件夹，新建Component

app.json

 "usingComponents": {  
    xxx
    "my-numbers":"./components/numbers/numbers"
  },

numbers.js

// components/numbers/numbers.js
// 导入成员storeBindingsBehavior
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
// 导入实例store
import{store}from '../../store/store'
Component({
  // behaviors指向一个数组
behaviors:[storeBindingsBehavior],
storeBindings:{
  // 数据源
  store,
  // fields绑定计算属性或数据字段
  fields:{
    // Conum1是组件的名字,num1是store的名字
    Conum1:'num1',
    Conum2:'num2',
    Cosum:'sum',
  },
  // actions绑定方法
  actions:{
    CoupdataNum2:'updataNum2'
  }
},
  methods: {
    btnhander2(e){
      this.CoupdataNum2(e.target.dataset.step)
    }
  }
})

number.wxml

<view>{{Conum1}}+{{Conum2}}={{Cosum}}</view>
<van-button type="primary" bind:tap="btnhander2" data-step="{{1}}">Conum1+1</van-button>
<van-button type="danger" bind:tap="btnhander2" data-step="{{-1}}">Conum2-1</van-button>

 效果：