【微信小程序】 全局数据共享

 

1.什么是全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有: Vuex、Redux、 MobX等。

 

2.小程序中的全局数据共享方案

在小程序中，可使用mobx-miniprogram

配合mobx-miniprogram-bindings实现全局数据共享。

其中:

● mobx- miniprogram

　　用来创建Store实例对象

● mobx-miniprogram-bindings

　　用来把Store中的共享数据或方法,绑定到组件或页面中使用

 

3、MOBX安装

需要先有NPM支持

https://www.cnblogs.com/mindzone/p/16223460.html

安装MOBX依赖

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

安装完成后，每次都要删除之前构建Miniprogram_npm包

然后重新构建生成

 

4、编写Store文件

/**
 * /store/index.js
 * 导入Mobx包资源
 */
import { action, observable } from 'mobx-miniprogram'

const config = {
  // 配置对象中，存放需要共享的数据字段
  numA:1,
  numB:2,

  // 设置只读的计算属性 get 标记该数据只能只读
  get sum() { return this.numA + this.numB },

  // actions方法， 用来修改store中的数据
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numB += step
  }),
}
// 导出资源
export const store = observable(config)

　　

5、绑定页面

在页面的JS文件中导入资源：

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

加载时绑定Store资源

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 页面加载时设置绑定
    this.storeBindings = createStoreBindings(
      this, {
        store,
        fields: ['numA', 'numB', 'sum'],
        actions: ['updateNum1', 'updateNum2']
      }
    )
  },

结束时解除Store资源

/**
 * 生命周期函数--监听页面卸载
 */
onUnload() {
  // 解除绑定
  this.storeBindings.destoryStoreBindings()
},

6、使用Store配置：

store变量页面展示

<view>
  {{numA}} + {{numB}} = {{sum}}
</view>
<van-button 
  data-step="{{1}}"
  type="primary" 
  bindtap="btnHandler1">
  numA + 1
</van-button>

<van-button 
  data-step="{{-1}}"
  type="danger" 
  bindtap="btnHandler2">
  numA - 1
</van-button>

绑定的方法，这里演示了如何获取dataset变量

  btnHandler1(e) {
    this.updateNum1( e.target.dataset.step)
  },
  btnHandler2(e) {
    this.updateNum1( e.target.dataset.step)
  }

　　

7、配置Store到组件中使用

 组件引入Mobx资源：

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

绑定Store和对应的属性：

// components/test6/test6.js
Component({
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store,

    // 声明绑定的字段
    fields: {
      // 写法一
      numA: () => store.numA,
      // 写法二
      numB: (store) => store.numB,
      // 写法三
      sum: 'sum' 
    },
    // 绑定的方法
    actions: {
      updateNum2: 'updateNum2'
    }
  }
})

方法编写：

  /**
   * 组件的方法列表
   */
  methods: {
    btnHandler1(e) {
      this.updateNum2( e.target.dataset.step)
    },
    btnHandler2(e) {
      this.updateNum2( e.target.dataset.step)
    }
  }

组件HTML代码

<!--components/test6/test6.wxml-->
<text>components/test6/test6.wxml</text>
<view>
  {{numA}} + {{numB}} = {{sum}}
</view>
<van-button 
  data-step="{{1}}"
  type="primary" 
  bindtap="btnHandler1">
  numB + 1
</van-button>

<van-button 
  data-step="{{-1}}"
  type="danger" 
  bindtap="btnHandler2">
  numB - 1
</van-button>

　　

在页面和组件能够共同操作Store存储的变量：