微信小程序状态管理与计算属性同时使用：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

在项目的根目录下，使用如下命令，将快速在根目录下初始化生成一个 package.json 文件
powershell 复制代码
```
npm init -y
```
安装 miniprogram-computed 和 mobx-miniprogram
powershell 复制代码
```
npm install miniprogram-computed 
```
powershell 复制代码
```
npm install mobx-miniprogram mobx-miniprogram-bindings
```
然后在 微信开发者工具 的左上角点击》工具》构建 npm，构建成功后，将会在项目根目录下生成 miniprogram_npm 文件夹，可以在 miniprogram_npm 文件夹中看见构建的结果

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

在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom04 文件夹，并在该文件夹中创建 custom04组件（在文件夹上点击鼠标右键，选择 新建 component）
找到项目根目录下的 app.json 文件，增加如下代码，将 custom04组件注册为全局组件
json 复制代码
```
{
  // ...其他配置项
  
  "usingComponents": {
    "custom04": "./components/custom04/custom04"
  }
}
```
在 pages/index.wxml 中使用 custom04 组件
html 复制代码
```
<custom04 />
```

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

js 复制代码

// 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
      })
    }
  }

})

修改components/custom04/custom04.wxml 文件

html 复制代码

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

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

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

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

js 复制代码

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;
  }
})

在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom05 文件夹，并在该文件夹中创建 custom05组件（在文件夹上点击鼠标右键，选择 新建 component）
找到项目根目录下的 app.json 文件，增加如下代码，将 custom05 组件注册为全局组件
json 复制代码
```
{
  // ...其他配置项
  
  "usingComponents": {
    "custom05": "./components/custom05/custom05"
  }
}
```
在 pages/index.wxml 中使用 custom05 组件
html 复制代码
```
<custom05 />
```

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

javascript 复制代码

// 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']
  }
})

修改components/custom05/custom05.wxml 文件

html 复制代码

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

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

一、安装 miniprogram-computed 和 mobx-miniprogram

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

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

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

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