微信小程序：behaviors 代码共享、MobX 全局数据共享

behaviors

用于实现组件间代码共享特性，类似于 Vue.js 中的 mixins 。

• 混入覆盖：组件 data 上的属性和混入 data 属性，组件优先级高。

1. 在项目根目录创建 behaviors 目录，并创建 my-behavior.js 。

   module.exports = Behaviors({
         
         
       properties: {
         
         },
       data: {
         
         },
       methods: {
         
         },
   })
   

2. 导入使用

   // 导入
   const myBehaviors = require('../../behaviors/my-behavior')
   
   Component({
         
         
       // 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中
       behaviors: [myBehavior],
   })
   

MobX 全局数据共享

解决组件之间数据共享。

小程序中，使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

• mobx-miniprogram：创建 Store 实例对象；
• mobx-miniprogram-bindings：把 Store 中的共享数据或方法，绑定到组件或页面中使用。

1. 安装依赖包

   yarn add mobx-miniprogram mobx-miniprogram-bindings
   

2. 创建Mobx的Store实例

   在根目录下创建 Store/store.js 文件。

   /* 语法格式 */
   import {
         
          observable, action } from 'mobx-miniprogram'
   
   export const store = observable({
         
         
       // 数据字段
       键: 值,
       
       // 计算属性
       get 方法名() {
         
         
           return 返回的值;
       },
       
       // actions方法，用来修改store中的数据
       方法名: action(方法体),
   })
   

   /* store/store.js */
   import {
         
          observable, action } from 'mobx-miniprogram'
   
   export const store = observable({
         
         
       // 数据字段
       numA: 1,
       numB: 1,
   	    
       // 计算属性
       get sum() {
         
         
           return this.numA + numB
       },
       
       // actions 方法，用来修改 store 中的数据
       updateNum1: action(function (step) {
         
         
           this.numA += step
       }),
       updateNum2: action(function (step) {
         
         
           this.numB += step
       }),
   })
   

3. 页面调用

   /* 语法格式 */
   import {
         
          createStoreBindings } from 'mobx-miniprogram-bindings'
   import {
         
          store } from '../../store/store'
   
   Page({
         
         
       // 页面加载时创建
       onLoad() {
         
         
           this.storeBindings = createStoreBindings(this, {
         
         
               store,
               fields: ['属性名', '计算属性'],
               actions: ['方法名']
           })
       },
       
       // 页面卸载同时卸载storeBindings
       onUnload() {
         
         
           this.storeBindings.destoryStoreBindings()
       }
   })
   

   • 示例

     /* 页面.js文件 */
     import {
             
              createStoreBindings } from 'mobx-miniprogram-bindings'
     import {
             
              store } from '../../Store/store.js'
     
     Page({
             
             
         // 监听页面加载
         onLoad() {
             
             
             this.storeBindings = createStoreBindings(this, {
             
             
                 store,
                 fields: ['numA', 'numB', 'sum'],
                 actions: ['updateNum1', 'updateNum2'],
             })
         },
         // 监听页面卸载
         onUnload() {
             
             
             // 销毁-性能优化
             this.storeBindings.destroyStoreBindings()
         }
     })
     

     <view>{
            
            { numA }} + {
            
            { numB }} = {
            
            { sum }}</view>
     <button bindtap="updateNum1" :data-step="{
              
              {1}}">numA加</button>
     <button bindtap="updateNum2" data-step="{
              
              {-1}}">numB减</button>
     

4. 组建中使用

   import {
         
          storeBindingsBehavior } from 'mobx-miniprogram-bindings'
   import {
         
          store } from '../../Store/store.js'
   
   Component({
         
         
       // storeBindingsBehavior 实现自动绑定
       behaviors: [storeBindingsBehavior],
       storeBindings: {
         
         
           // 指定要绑定的 Store
           store,
           // 指定要绑定的字段数据
           fields: ['属性名1', '属性名2', '计算属性1']
           // 指定要绑定的方法
           actions: {
         
         
               方法名: '方法名'
           }
       }
   })
   

   • 示例

     import {
             
              storeBindingsBehavior } from 'mobx-miniprogram-bindings'
     import {
             
              store } from '../../Store/store.js'
     
     Component({
             
             
         // storeBindingsBehavior 实现自动绑定
         behaviors: [storeBindingsBehavior],
         storeBindings: {
             
             
             // 指定要绑定的 Store
             store,
             // 指定要绑定的字段数据
             fields: ['numA', 'numB', 'sum'],
             // 指定要绑定的方法
             actions: ['updateNum2']
         }
     })
     

     <view>{
            
            { numA }} + {
            
            { numB }} = {
            
            { sum }}</view>
     <button bindtap="updateNum1" :data-step="{
              
              {1}}">numA加</button>
     <button bindtap="updateNum2" data-step="{
              
              {-1}}">numB减</button>