产看网站权重精准客源推广引流

• 两个框架扩展提供的 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').behaviorComponentWithStore({// storeBindings 不再复述// 注册 behaviorbehaviors: [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 以及 numBupdate: action(function () {this.numA += 1this.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>