微信小程序状态管理与计算属性同时使用：miniprogram-computed 和 mobx-miniprogram

• 两个框架扩展提供的 ComponentWithStore 与 ComponentWithComputed 方法无法结合使用。
• 如果需要在一个组件中既想使用 mobx-miniprogram-bindings 又想使用 miniprogram-computed解决方案是：

  1. 使用旧版 API

     • 自定义组件仍然使用 Component 方法构建组件，将两个扩展依赖包的使用全部改为旧版 API
     • mobx-miniprogram-bindings 官方文档
     • miniprogram-computed 官方文档

  2. 使用兼容写法

     • 即要么使用 ComponentWithStore 方法构建组件，要么使用 ComponentWithComputed 方法构建组件

     • 如果使用了 ComponentWithStore 方法构建组件，计算属性写法使用旧版 API

     • 如果使用了 ComponentWithComputed 方法构建组件，Mobx写法使用旧版 API

一、安装 miniprogram-computed 和 mobx-miniprogram

1. 在项目的根目录下，使用如下命令，将快速在根目录下初始化生成一个 package.json 文件

   npm init -y
   

2. 安装 miniprogram-computed 和 mobx-miniprogram

   npm install miniprogram-computed 
   

   npm install mobx-miniprogram mobx-miniprogram-bindings
   

3. 然后 在 微信开发者工具 的左上角 点击 》工具》 构建 npm，构建成功后，将会在项目根目录下生成 miniprogram_npm 文件夹，可以在 miniprogram_npm 文件夹中看见构建的结果
   

二、在 ComponentWithStore 构建的组件中使用 计算属性

1. 在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom04 文件夹，并在该文件夹中创建 custom04组件（在文件夹上点击鼠标右键，选择 新建 component）

2. 找到项目根目录下的 app.json 文件，增加如下代码，将 custom04组件注册为 全局组件

   {
     // ...其他配置项
     
     "usingComponents": {
       "custom04": "./components/custom04/custom04"
     }
   }
   

3. 在 pages/index.wxml 中使用 custom04 组件

   <custom04 />
   

4. 修改components/custom04/custom04.js 文件， Component 方法替换成 ComponentWithStore 方法

   // components/custom04/custom04.js
   import {
     ComponentWithStore
   } from 'mobx-miniprogram-bindings'
   
   // 导入计算属性 behavior
   const computedBehavior = require('miniprogram-computed').behavior
   
   ComponentWithStore({
     // storeBindings 不再复述
   
     // 注册 behavior
     behaviors: [computedBehavior],
     data: {
       a: 1,
       b: 2
     },
     computed: {
       total(data) {
         console.log('q23');
         return data.a + data.b
       }
     },
     watch: {
       'a,b': function (a, b) {
         console.log(`a更新之后的数据：` + a);
         console.log(`b更新之后的数据：` + b);
       }
     },
     methods: {
       updateData() {
         this.setData({
           a: this.data.a + 1,
           b: this.data.b + 1
         })
       }
     }
   
   })
   

5. 修改components/custom04/custom04.wxml 文件

   <view>{{a}} + {{b}} = {{total}}</view>
   <button type="warn" bind:tap="updateData">修改数据</button>
   

三、在 ComponentWithComputed 构建的组件中使用 状态管理

1. 在项目的根目录下创建 stores 文件夹，然后在该文件夹下新建 numStore.js 文件

2. 在 /stores/numStore.js 导入 observable 、action 方法。使用 observable 方法需要接受一个 store 对象，存储应用的状态

   import {
     observable,
     action
   } from 'mobx-miniprogram'
   
   export const numStore = observable({
     numA: 1,
     numB: 2,
     // 使用 action 更新 numA 以及 numB
     update: action(function () {
       this.numA += 1
       this.numB += 1
     }),
   
     // 计算属性，使用 get 修饰符，
     get sum() {
       return this.numA + this.numB;
     }
   })
   

3. 在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom05 文件夹，并在该文件夹中创建 custom05组件（在文件夹上点击鼠标右键，选择 新建 component）

4. 找到项目根目录下的 app.json 文件，增加如下代码，将 custom05 组件注册为 全局组件

   {
     // ...其他配置项
     
     "usingComponents": {
       "custom05": "./components/custom05/custom05"
     }
   }
   

5. 在 pages/index.wxml 中使用 custom05 组件

   <custom05 />
   

6. 修改components/custom05/custom05.js 文件， Component 方法替换成 ComponentWithComputed 方法

   // components/custom05/custom05.js
   import {
     ComponentWithComputed
   } from 'miniprogram-computed'
   
   import {
     storeBindingsBehavior
   } from 'mobx-miniprogram-bindings'
   
   import {
     numStore
   } from '../../stores/numStore'
   
   ComponentWithComputed({
     behaviors: [storeBindingsBehavior],
     storeBindings: {
       store: numStore,
       fields: ['numA', 'numB', 'sum'],
       actions: ['update']
     }
   })
   

7. 修改components/custom05/custom05.wxml 文件

   <!--components/custom05/custom05.wxml-->
   <view>{{numA}} + {{numB}} = {{sum}}</view>
   <button type="primary" bind:tap="update">更新store 中的数据</button>