小程序学习记录十一:全局数据共享

r囧r小猫 2021-09-07 13:16 378阅读 0赞

### :全局数据共享 ###

*  一、全局数据共享
 *  二、小程序的全局数据共享
 *  三、安装MobX相关的包
 *   *  1.安装
     *  2.使用
     *  3.将Store中的成员绑定到页面上
     *  4.将Sotre的成员绑定到组件中

# 一、全局数据共享 #

全局数据共享又叫做状态管理，是为了解决组件之间数据工序的问题。开发中常用的全局数据工序方案有：Vuex,Redux,MobX等。

# 二、小程序的全局数据共享 #

使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享  
mobx-miniprogram用来创建Store实例对象  
mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用。

# 三、安装MobX相关的包 #

## 1.安装 ##

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

安装后重新删除miniprogram\_npm，再构建npm

## 2.使用 ##

再根目录下创一个Store文件夹，创建一个store.js文件

// 在这个 JS 文件中，专门来创建 Store 的实例对象
    import {  observable, action } from 'mobx-miniprogram'
    export const store = observable({ 
      // 数据字段
      numA: 1,
      numB: 2,
      activeTabBarIndex: 0,
      // 计算属性，定义的计算属性必须加一个get，表示当前计算属性的值是只读的。即这个sum属性不能被重新赋值。
      get sum() { 
        return this.numA + this.numB
      },
      // actions 函数，专门来修改 store 中数据的值，外界不能直接修改store里的数据，要用action方法包裹。
      updateNum1: action(function (step) { 
        this.numA += step
      }),
      updateNum2: action(function (step) { 
      //step是外界传过来的参数
        this.numB += step
      }),
      updateActiveTabBarIndex: action(function(index) { 
        this.activeTabBarIndex = index
      })
    })

## 3.将Store中的成员绑定到页面上 ##

在某页面的js文件中

//导入需要的数据
    /
    import {  createStoreBindings } from 'mobx-miniprogram-bindings'
    import {  store } from '../../store/store'
    
    Page({ 
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
      //this.storeBindings 是createStoreBindings的返回值
        this.storeBindings = createStoreBindings(this, { 
        //数据源
          store,
          //指定哪些字段
          fields: ['numA', 'numB', 'sum'],
          //指定哪些方法要导入到这个页面上
          actions: ['updateNum1']
        })
      },
      //按钮绑定点击事件的方法，可以直接使用actions里定义好的方法。
      btnHandler1(e) { 
        // console.log(e)
        //可以直接使用actions里定义好的方法。
        //updateNum1是store里的方法
        this.updateNum1(e.target.dataset.step)
      },
    
     /** * 生命周期函数--监听页面卸载 */
     onUnload: function () { 
        //清理数据
        this.storeBindings.detroyStoreBindings()
      },
    })

wxml文件中

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

## 4.将Sotre的成员绑定到组件中 ##

页面和组件的的导入有所区别  
某组件js文件中

//桥梁，将数据映射到组件中使用
    import {  storeBindingsBehavior } from 'mobx-miniprogram-bindings'
    //导入数据源
    import {  store } from '../../store/store'
    
    Component({ 
    
    //通过storeBindingsBehavior来实现自动绑定
      behaviors: [storeBindingsBehavior],
      
      //进行绑定和映射
      storeBindings: { 
        // 数据源
        store, //指定要绑定的store
        fields: {   //指定要绑定的字段数据
          numA: ()=>store.numA,  //第一种绑定方法
          numB: (store)=>store.numB,  //第二种绑定方式
          sum: 'sum'               //第三种绑定方式
        },
        //指定要绑定的方法
        actions: { 
          updateNum2: 'updateNum2'
        }
      },
      /** * 组件的属性列表 */
      properties: { 
      },
      /** * 组件的初始数据 */
      data: { 
      },
      /** * 组件的方法列表 */
      methods: { 
        btnHandler2(e) { 
        //调用store里的方法updateNum2
          this.updateNum2(e.target.dataset.step)
        }
      }
    })

某组件的的wxml文件

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