MobX MiniProgram Bindings

https://github.com/wechat-miniprogram/mobx-miniprogram-bindings
Admin
An auxiliary library that provides MobX bindings for WeChat Mini Programs, enabling state management...
Tokens:5,620
Snippets:36
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### mobx-miniprogram-bindings Installation

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Instructions on how to install the mobx-miniprogram and mobx-miniprogram-bindings libraries using npm.

```APIDOC
## Installation

### Description
Install both mobx-miniprogram and mobx-miniprogram-bindings as dependencies in your WeChat MiniProgram project.

### Command
```bash
npm install --save mobx-miniprogram mobx-miniprogram-bindings
```
```

--------------------------------

### Creating a MobX Store

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Example of creating an observable MobX store with data fields, computed properties, and actions using `makeAutoObservable`.

```APIDOC
## Creating a MobX Store

### Description
Create an observable store using MobX's `makeAutoObservable` or traditional `observable` API with data fields, computed properties, and actions.

### Code Example
```javascript
import { makeAutoObservable } from 'mobx-miniprogram'

class Store {
  numA = 1
  numB = 2

  constructor() {
    makeAutoObservable(this)
  }

  get sum() {
    return this.numA + this.numB
  }

  update() {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  }
}

export const store = new Store()
```
```

--------------------------------

### Install MobX Libraries

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Install the necessary MobX libraries for your WeChat Mini Program project using npm. This includes 'mobx-miniprogram' for MobX core functionalities and 'mobx-miniprogram-bindings' for the binding utilities.

```shell
npm install --save mobx-miniprogram mobx-miniprogram-bindings
```

--------------------------------

### Initialize Store Bindings with glass-easel Chaining API

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

This example shows how to initialize store bindings within a WeChat MiniProgram component using the glass-easel Chaining API. It provides a more modern and concise way to define component initialization, including setting up reactive bindings to a MobX store. The `initStoreBindings` function connects the component's context to the store, making store data and actions accessible.

```typescript
import { initStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'

Component()
  .init((ctx) => {
    const { listener } = ctx

    const storeBindings = initStoreBindings(ctx, {
      store,
      fields: ['numA', 'numB', 'sum']
    })

    const buttonTap = listener(() => {
      store.update()
      console.log('Sum updated:', store.sum)
    })

    return { buttonTap }
  })
  .register()
```

--------------------------------

### Behavior Binding Setup

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Configure behavior-based binding by including the `storeBindingsBehavior` in your component's behaviors array and defining the `storeBindings` property. This is the standard approach for components that utilize MobX state management.

```javascript
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    /* 绑定配置（见下文） */
  },
})
```

--------------------------------

### Create MobX Store

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Define your MobX store using MobX's observable and action decorators or functions. This example demonstrates creating a store with observable properties 'numA' and 'numB', a computed property 'sum', and an action 'update' to modify the store's state.

```javascript
// store.js
import { observable, action } from 'mobx-miniprogram'

// 创建 store 时可以采用任何 mobx 的接口风格
// 这里以传统的 observable 风格为例

export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,

  // 计算属性
  get sum() {
    return this.numA + this.numB
  },

  // actions
  update: action(function () {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  }),
})
```

--------------------------------

### Integrate with miniprogram-computed using mobx-miniprogram-bindings

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

This snippet illustrates how to use `mobx-miniprogram-bindings` in conjunction with `miniprogram-computed`. It emphasizes the importance of the order in which behaviors are declared, with `storeBindingsBehavior` needing to precede `computedBehavior` to ensure correct data flow and reactivity. This setup allows components to leverage both global MobX state and local computed properties derived from that state.

```javascript
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { computedBehavior } from 'miniprogram-computed'
import { store } from './store'

Component({
  // Order matters: storeBindingsBehavior must come first
  behaviors: [storeBindingsBehavior, computedBehavior],
  storeBindings: {
    store,
    fields: ['numA', 'numB']
  },
  computed: {
    // Local computed properties
    doubled(data) {
      return data.numA * 2
    }
  },
  methods: {
    handleTap() {
      console.log('Store:', this.data.numA, this.data.numB)
      console.log('Computed:', this.data.doubled)
    }
  }
})
```

--------------------------------

### Chaining API with `initStoreBindings`

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Employ the `initStoreBindings` function when working with the glass-easel Chaining API for a more integrated experience. This function facilitates the initialization of store bindings within the component's lifecycle methods, providing a cleaner approach to state management.

```javascript
import { initStoreBindings } from 'mobx-miniprogram-bindings'

Component()
  .init((ctx) => {
    const { listener } = ctx
    initStoreBindings(ctx, {
      store,
      fields: ['numA', 'numB', 'sum'],
    })
    const buttonTap = listener(() => {
      store.update()
    })
    return { buttonTap }
  })
  .register()
```

--------------------------------

### storeBindingsBehavior - Component Behavior Binding

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Demonstrates how to use `storeBindingsBehavior` to automatically connect MobX stores to component data by defining `storeBindings`.

```APIDOC
## storeBindingsBehavior - Component Behavior Binding

### Description
Add `storeBindingsBehavior` to a component's behaviors array and define `storeBindings` to automatically connect MobX store to component data.

### Code Example
```javascript
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: 'local data'
  },
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'],
    actions: {
      buttonTap: 'update'
    }
  },
  methods: {
    myMethod() {
      console.log(this.data.sum) // Access MobX store field
      this.buttonTap() // Trigger store action
    }
  }
})
```
```

--------------------------------

### Create a MobX Store with makeAutoObservable

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Demonstrates how to create an observable MobX store using `makeAutoObservable`. This store can contain data fields, computed properties, and actions that will be managed by MobX and can be bound to WeChat MiniProgram components.

```javascript
import { makeAutoObservable } from 'mobx-miniprogram'

class Store {
  numA = 1
  numB = 2

  constructor() {
    makeAutoObservable(this)
  }

  get sum() {
    return this.numA + this.numB
  }

  update() {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  }
}

export const store = new Store()
```

--------------------------------

### Manually Create Store Bindings for WeChat Mini Program Pages

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Enables manual creation of store bindings in pages or when the store needs to be determined dynamically. It returns a manager object with cleanup methods, crucial for preventing memory leaks.

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

Page({
  data: {
    localData: 'page data'
  },
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['update']
    })
  },
  onUnload() {
    // IMPORTANT: Must call to prevent memory leaks
    this.storeBindings.destroyStoreBindings()
  },
  handleTap() {
    console.log(this.data.sum)
    this.update()
  }
})
```

--------------------------------

### Manual Binding with `createStoreBindings`

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Implement manual binding using the `createStoreBindings` function, which is suitable for scenarios where the store is determined during the component's lifecycle (e.g., in `onLoad`). This method requires manual cleanup of bindings in `onUnload` to prevent memory leaks.

```javascript
import { createStoreBindings } from 'mobx-miniprogram-bindings'

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* 绑定配置（见下文） */
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  },
})
```

--------------------------------

### storeBindings Actions - Array Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Binding MobX store action methods directly to the component instance using an array of method names.

```APIDOC
## storeBindings Actions - Array Form

### Description
Bind store action methods directly to component instance using an array of method names.

### Code Example
```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['sum'],
    actions: ['update']
  },
  methods: {
    handleButtonTap() {
      // this.update === store.update
      this.update()
      console.log('Updated sum:', this.data.sum)
    }
  }
})
```
```

--------------------------------

### Bind Multiple MobX Stores to a Single WeChat Mini Program Component

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Allows binding multiple MobX stores to a single component by providing an array of binding configurations. Each configuration specifies the store, fields to bind, and actions to map.

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

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['update']
    },
    {
      store: userStore,
      fields: ['username', 'avatar'],
      actions: ['login', 'logout']
    }
  ],
  methods: {
    handleAction() {
      console.log(this.data.sum, this.data.username)
      this.update()
      this.login()
    }
  }
})
```

--------------------------------

### Component Configuration with storeBindings and computedBehavior

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

This snippet shows the correct order for including storeBindingsBehavior and computedBehavior in a Component's behaviors list. The computedBehavior must follow storeBindingsBehavior to ensure proper reactivity.

```javascript
Component({
  behaviors: [storeBindingsBehavior, computedBehavior],
  /* ... */
})
```

--------------------------------

### Map Component Methods to Store Actions in WeChat Mini Programs

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Maps component method names to store action method names using an object for cleaner action invocation. This allows direct calling of store actions from the component instance.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['sum'],
    actions: {
      buttonTap: 'update',
      handleUpdate: 'update'
    }
  },
  methods: {
    onTap() {
      // this.buttonTap === store.update
      this.buttonTap()
    }
  }
})
```

--------------------------------

### TypeScript Component Wrapper for MobX Bindings

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Provides a type-safe component creation utility that automatically infers store types and eliminates the need to manually add `storeBindingsBehavior`. Ensures full type inference for data and actions.

```typescript
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { store } from './store'

ComponentWithStore({
  data: {
    localData: 'component data'
  },
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'] as const,
    actions: {
      buttonTap: 'update'
    } as const
  },
  methods: {
    myMethod() {
      // Full type inference for this.data.numA, this.data.sum
      console.log(this.data.numA, this.data.sum)
      // Full type inference for this.buttonTap
      this.buttonTap()
    }
  }
})
```

--------------------------------

### storeBindings Fields - Mapping Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Mapping component data field names to different MobX store property names using an object.

```APIDOC
## storeBindings Fields - Mapping Form

### Description
Map component data field names to different store property names using an object with key-value pairs.

### Code Example
```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      a: 'numA',
      b: 'numB',
      total: 'sum'
    }
  },
  methods: {
    handleTap() {
      // this.data.a === store.numA
      // this.data.b === store.numB
      // this.data.total === store.sum
      console.log(`${this.data.a} + ${this.data.b} = ${this.data.total}`)
    }
  }
})
```
```

--------------------------------

### Updating Store Data: Immediate vs. Partial Update Strategies

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Demonstrates how to achieve immediate updates to store bindings and the correct way to update parts of an object within the store to trigger UI changes. Direct modification of object properties does not trigger updates; instead, a new object reference must be assigned.

```javascript
// In behavior binding:
this.updateStoreBindings()

// In manual binding:
this.storeBindings.updateStoreBindings()

// Incorrect partial update (does not trigger UI change):
// this.someObject.someField = 'xxx'

// Correct partial update (triggers UI change):
this.someObject = Object.assign({}, this.someObject, { someField: 'xxx' })
```

--------------------------------

### Create Type-Safe Behaviors with Store Bindings using BehaviorWithStore

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

This snippet demonstrates how to create reusable, type-safe behaviors for WeChat MiniProgram components using `mobx-miniprogram-bindings`. It binds MobX store fields and actions to the component's data and methods, facilitating reactive updates and interactions. The `BehaviorWithStore` utility simplifies the process of defining component logic that depends on shared store state.

```typescript
import { BehaviorWithStore } from 'mobx-miniprogram-bindings'
import { store } from './store'

export const counterBehavior = BehaviorWithStore({
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'] as const,
    actions: ['update'] as const
  },
  methods: {
    increment() {
      this.update()
      console.log('New sum:', this.data.sum)
    }
  }
})

// Use in component
Component({
  behaviors: [counterBehavior],
  methods: {
    handleTap() {
      this.increment()
    }
  }
})
```

--------------------------------

### Bind MobX Store to Component using storeBindingsBehavior

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Integrates MobX store data and actions into a WeChat MiniProgram component by utilizing the `storeBindingsBehavior`. This allows the component to automatically update its data when the MobX store changes and to trigger store actions.

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

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: 'local data'
  },
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'],
    actions: {
      buttonTap: 'update'
    }
  },
  methods: {
    myMethod() {
      console.log(this.data.sum) // Access MobX store field
      this.buttonTap() // Trigger store action
    }
  }
})
```

--------------------------------

### Multiple Store Bindings

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Bind multiple MobX stores to a single component by providing an array of binding configurations to the `storeBindings` property. This allows for managing state from various sources within one component.

```javascript
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
})
```

--------------------------------

### Component Binding with Behavior

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Integrate the MobX store into a WeChat Mini Program component using the 'storeBindingsBehavior'. This approach automatically synchronizes specified fields and actions from the store to the component's data and methods. Ensure your project's base library version is >= 2.11.0.

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

Component({
  behaviors: [storeBindingsBehavior], // 添加这个 behavior
  data: {
    someData: '...',
  },
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum',
    },
    actions: {
      buttonTap: 'update',
    },
  },
  methods: {
    myMethod() {
      this.data.sum // 来自于 MobX store 的字段
    },
  },
})
```

--------------------------------

### Organize Bound Fields with Namespaces in WeChat Mini Programs

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Supports organizing bound fields under a namespace to prevent naming conflicts with a component's own data. This ensures clarity when the store has fields with the same names as component data.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  data: {
    sum: 'local sum value'
  },
  storeBindings: {
    store,
    namespace: 'storeData',
    fields: ['numA', 'numB', 'sum']
  },
  methods: {
    handleTap() {
      // Access via namespace
      console.log(this.data.storeData.sum) // From store
      console.log(this.data.sum) // Local data, not affected
    }
  }
})
```

--------------------------------

### TypeScript Component Binding

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

Utilize the `ComponentWithStore` interface for enhanced type safety in TypeScript projects. This interface streamlines the binding process, automatically handling type inference for store fields and actions. Remember to append `as const` to `fields` and `actions` for better type deduction.

```typescript
import { ComponentWithStore } from 'mobx-miniprogram-bindings'

ComponentWithStore({
  data: {
    someData: '...',
  },
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'] as const,
    actions: {
      buttonTap: 'update',
    } as const,
  },
})
```

--------------------------------

### Handle Partial Object Updates for Reactive Updates in MobX

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

This code demonstrates the correct way to handle updates to nested object properties within a MobX store to ensure reactive updates in a WeChat MiniProgram. It contrasts a wrong approach (direct mutation) with the correct approach (replacing the entire object or relevant nested objects) to trigger UI updates reliably. This is crucial for maintaining the reactivity of the application state.

```javascript
import { makeAutoObservable } from 'mobx-miniprogram'

class Store {
  user = { name: 'Alice', settings: { theme: 'light' } }

  constructor() {
    makeAutoObservable(this)
  }

  // WRONG: Direct mutation won't trigger updates
  updateThemeWrong(theme) {
    this.user.settings.theme = theme // ❌ Won't trigger UI update
  }

  // CORRECT: Replace entire object
  updateThemeCorrect(theme) {
    this.user = {
      ...this.user,
      settings: {
        ...this.user.settings,
        theme
      }
    }
  }
}

const store = new Store()

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['user']
  },
  methods: {
    changeTheme() {
      store.updateThemeCorrect('dark')
      // this.data.user will update correctly
    }
  }
})
```

--------------------------------

### Bind Store Actions using Array Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Connects MobX store action methods directly to the component instance, allowing them to be called as if they were component methods. This simplifies the invocation of store logic from the component's event handlers.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['sum'],
    actions: ['update']
  },
  methods: {
    handleButtonTap() {
      // this.update === store.update
      this.update()
      console.log('Updated sum:', this.data.sum)
    }
  }
})
```

--------------------------------

### Enable Deep Structural Comparison for MobX Store Updates

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Enables deep structural comparison for objects and arrays, optimizing updates and preventing unnecessary re-renders when the data's structure changes. Requires MobX's `makeAutoObservable`.

```javascript
import { makeAutoObservable } from 'mobx-miniprogram'

class ObjectStore {
  user = { name: 'Alice', age: 25 }

  constructor() {
    makeAutoObservable(this)
  }

  updateUser(updates) {
    this.user = { ...this.user, ...updates }
  }
}

const objectStore = new ObjectStore()

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store: objectStore,
    fields: ['user'],
    structuralComparison: true // Enable deep comparison
  },
  methods: {
    handleUpdate() {
      objectStore.updateUser({ name: 'Bob' })
      // Only updates if structure actually changed
    }
  }
})
```

--------------------------------

### TypeScript Behavior Binding

Source: https://github.com/wechat-miniprogram/mobx-miniprogram-bindings/blob/master/README.md

For behaviors in TypeScript projects, use the `BehaviorWithStore` interface. This provides type safety when binding MobX stores to reusable behavior logic. Similar to component binding, use `as const` for `fields` and `actions` for optimal type inference.

```typescript
import { BehaviorWithStore } from 'mobx-miniprogram-bindings'

export const testBehavior = BehaviorWithStore({
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum'] as const,
    actions: ['update'] as const,
  },
})
```

--------------------------------

### storeBindings Fields - Array Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Binding specific data fields from the MobX store to component data using an array of field names.

```APIDOC
## storeBindings Fields - Array Form

### Description
Specify which data fields should be bound from the store to component data using an array of field names.

### Code Example
```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum']
  },
  methods: {
    handleTap() {
      // this.data.numA === store.numA
      // this.data.numB === store.numB
      // this.data.sum === store.sum
      console.log(`${this.data.numA} + ${this.data.numB} = ${this.data.sum}`)
    }
  }
})
```
```

--------------------------------

### Bind Store Fields using Array Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Specifies which fields from the MobX store should be directly bound to the component's data using a simple array of field names. This is the most straightforward way to sync store properties.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['numA', 'numB', 'sum']
  },
  methods: {
    handleTap() {
      // this.data.numA === store.numA
      // this.data.numB === store.numB
      // this.data.sum === store.sum
      console.log(`${this.data.numA} + ${this.data.numB} = ${this.data.sum}`)
    }
  }
})
```

--------------------------------

### Force Immediate Store Data Synchronization in WeChat Mini Programs

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Forces immediate synchronization of store data to the component, bypassing the next tick. This is useful when a change needs to be reflected instantly.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ['sum']
  },
  methods: {
    handleAction() {
      store.numA = 10
      // Without update, this.data.sum may not reflect the change yet
      console.log('Before update:', this.data.sum)

      this.updateStoreBindings()
      // After update, this.data.sum is immediately synchronized
      console.log('After update:', this.data.sum)
    }
  }
})
```

--------------------------------

### storeBindings Fields - Function Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Defining custom computed fields in component data using functions that derive values from MobX stores.

```APIDOC
## storeBindings Fields - Function Form

### Description
Define custom computed fields using functions that derive values from one or multiple stores.

### Code Example
```javascript
import { anotherStore } from './anotherStore'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // store field can be omitted when using only function form
    fields: {
      a: () => store.numA,
      b: () => anotherStore.numB,
      product: () => store.numA * anotherStore.numB
    }
  },
  methods: {
    handleTap() {
      console.log(`${this.data.a} * ${this.data.b} = ${this.data.product}`)
    }
  }
})
```
```

--------------------------------

### Bind Store Fields using Mapping Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Allows aliasing MobX store properties to different names within the component's data. This is useful for avoiding naming conflicts or for creating more descriptive data names in the component.

```javascript
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      a: 'numA',
      b: 'numB',
      total: 'sum'
    }
  },
  methods: {
    handleTap() {
      // this.data.a === store.numA
      // this.data.b === store.numB
      // this.data.total === store.sum
      console.log(`${this.data.a} + ${this.data.b} = ${this.data.total}`)
    }
  }
})
```

--------------------------------

### Bind Store Fields using Function Form

Source: https://context7.com/wechat-miniprogram/mobx-miniprogram-bindings/llms.txt

Enables the creation of custom computed fields within the component's data by providing functions. These functions can derive values from one or more MobX stores, allowing for complex data transformations.

```javascript
import { anotherStore } from './anotherStore'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // store field can be omitted when using only function form
    fields: {
      a: () => store.numA,
      b: () => anotherStore.numB,
      product: () => store.numA * anotherStore.numB
    }
  },
  methods: {
    handleTap() {
      console.log(`${this.data.a} * ${this.data.b} = ${this.data.product}`)
    }
  }
})
```
Tokens:
Raw