如何使用mobx-miniprogram和mobx-miniprogram-bindings创建全局共享的购物车Store

今天我们来谈谈mobx-miniprogram这个工具。它的作用很单纯，主要是为了建立一个数据仓库。但是，若想将数据映射到页面或组件上，就得用到mobx-miniprogram-bindings库。这和react-redux的功能相似，它起到了连接数据仓库与页面、组件的桥梁作用。

mobx - miniprogram基本情况

npm install --save mobx-miniprogram mobx-miniprogram-bindings
yarn add mobx-miniprogram mobx-miniprogram-bindings

操作需在微信开发者工具内完成，首先定位到相关工具，然后进行npm构建。这是必须的基础操作。为何要这样做？目的是为了确保项目能够顺利使用所需库。另外，我们经常需要共享数据，比如购物车里的商品状态和数量，我们期望一处更改，其他相关部分也能自动更新。

要在代码里构建store，得用mobx-miniprogram包里的observable和action。这两个方法对store的建立和数据操作特别关键。比如，你得决定哪些数据是可被观察的，还有哪些操作能改数据，这些全靠它们来决定。

在page页面中使用store

import { observable, action } from 'mobx-miniprogram'

在page页面处理store时，情况变得繁琐。这时，我们得用到mobx-miniprogram-bindings库。这个库是用来将store和page页面连接起来的。它提供了一个createStoreBindings方法。使用这个方法，我们可以获得一个对象，这个对象里有两个函数：updateStoreBindings和destroyStoreBindings。然后，我们将这个对象赋值给当前页面的storeBindings属性。

// 创建实例对象
export const chat = observable({
    // 定义两个全局参数
    chatList: [], // 购物车商品
    totalPrice: 0, // 购物车商品总价
    // 初始化购物车
    initChat: action(function (list) {
        this.chatListwww.cppcns.com = list
    }),
    // 修改价格
    setPrice: action(function (price) {
        this.totalPrice = price
    }),
})

此时务必留意一个重要环节，即在页面卸载时，务必调用destroyStoreBindings函数来断开当前页面的store连接。若不执行此操作，很可能会造成内存泄漏。内存泄漏并非好事，会导致程序体积持续增大，运行时也会出现故障。此前，有一项目因忽视此点，导致程序运行速度极慢，经过仔细检查，才发现问题根源在此。

在组件中使用store

使用store方法在组件中会有所区别。在Vue中，behaviors与混入相似，是必须搭配使用的。我们必须从mobx-miniprogram-bindings包中引入storeBindingsBehavior方法，然后在组件配置里设定storeBindings属性。另外，也可以通过将storeBindings设置为数组，轻松实现多个store的绑定。

// 从 mobx-miniprogram-bindings 包中导入`createStoreBindings`方法
import { createStoreBindings } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Page({
   // onLoad 生命周期钩子中使用createStoreBindings，把指定 store 中的数据字段和更新函数映射到当前页面
    onLoad() {
        this.chatStore = creajavascriptteStoreBindings(this, {
          store: chat,
          fields: ['chatList', 'totalPrice'],
          actions: ['initChat']
        })
      },
      // 
      fu() {
        let chat = [
            {
                name: 'XXXX',
                price: '111'
            },
            {
                name: 'XXXX',
                price: '111'
            }
        ]
        this.initChat(chat)
      },
      // 页面卸载时,销毁当前页面的 store 绑定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

这样做的好处是，当多个store需要互相连接时，无需逐个操作，整个过程变得简单。比如，一个页面中会有多个功能不同的组件，每个组件可能需要不同数据源的store，这种做法可以满足所有需求。

数据更新的时机

数据更新挺有意思。在store的字段被更新后，this.data并不会马上体现这一变化。那它究竟何时会更新？只有等到wx.nextTick的下一次执行才会更新。这样做的原因，是为了提高程序的运行效率，防止不必要的操作。

紧急情况下，数据更新势在必行，办法自然也有。我们能够采取特定措施，快速完成更新任务。特别是在需要即时响应用户操作的场合，这一点显得尤为关键。

多个store的划分

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
      store: chat,
      fields: ['totalPrice'],
      actions: ['setPrice']
   }，
   methods: {
     fn() {
       this.setPrice(666)
     }
   }
})

项目规模持续扩大，新增功能不断涌现，导致状态种类也相应增多。面对这种状况，不宜将所有状态信息都放在一个store中，以免引发混乱。为此，我们可以按照功能模块或职责将store分成几个部分。比如，在store目录下，可以创建多个模块来分别管理不同类别的状态。

若你拥有一个大型电商平台，它涵盖了商品、用户、订单等多种功能，你可以依据这些功能模块来划分数据存储区域。这样，每个区域只管理相应的功能，既让系统结构更分明，也便于代码的维护与升级。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
});

页面或组件中的store导入

最终，若页面或组件要操控特定store模块的状态，我们只需导入该模块，将其设为store属性，再传给createStoreBindings或storeBindingsBehavior。这过程就像搭积木，哪里需要模块，就取用哪个，既方便又灵活。

您听我这么介绍，有没有试过mobx-miniprogram？如果您用过了，能否分享下您的体验，比如有哪些小窍门或是遇到了什么困难？欢迎点赞、转发，或者留下您的看法来交流。

this.setPrice(666)
this.storeBindings.updateStoreBindings(js)
console.log(this.data.totalPrice)