34. Mobx（全局数据共享）

小程序的Mobx类似vue的vuex，使用该功能前，需要先安装2个包

在项目的根目录，点击右键，选择“在外部终端窗口中打开”，然后输入以下命令：

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

mobx-miniprogram             // 作用：创建store数据
mobx-miniprogram-bindings    // 作用：从store中取数据

安装成功后，点击小程序开发工具顶部的工具-构建npm，则会生成miniprogram_npm。如下图：

在页面中使用

1、在根目录中创建一个store文件夹，然后创建一个index.js。写入以下代码 ：

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

export const store = observable({
  // 数据字段，类似vuex里的state中的值
  num1: 1,
  num2: 2,

  // 一个函数，类似vue的计算属性
  get sum() {
    return this.num1 + this.num2
  },

  // 修改数据字段的方法，类似vuex的action或者mutations
  updataNum1: action(function(step){
    this.num1 += step
  }),

  // 修改数据字段的方法，类似vuex的action或者mutations
  updataNum2: action(function(step){
    this.num2 += step
  }),
})

2、在所在的page页面中的js中使用

index.js

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

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num1', 'num2', 'sum'], // 对应store数据中的变量
      actions: ['updataNum1']          // 对应store数据中的action函数
    })
  },
  changeNum1(e) {
    this.updataNum1(e.target.dataset.step) // 调用action函数
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()  // 销毁
  }
})

index.wxml

<view>
   <!--使用store中的数据-->
  {{ num1 }} + {{ num2 }} = {{ sum }}
  <button type="primary" bind:tap="changeNum1" data-step="{{2}}">num1的值+1</button>
</view>

运行效果

tips：如果遇到这个报错：Error: module 'pages/index/mobx-miniprogram-bindings.js' is not defined, require args is 'mobx-miniprogram-bindings'，请把miniprogram_npm这个包删了，然后在次构建npm，还不行的话则重新打开项目

在组件上使用

在组件中的js文件写入以下代码：

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

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      num1: 'num1',
      num2: 'num2',
      sum: 'sum',
    },
    actions: {
      updataNum1: 'updataNum1'
    }
  },
  methods: {
    changeNum1(e) {
      this.updataNum1(e.target.dataset.step)
    }
  }
})

在组件中的wxml写入以下代码：

<view>
  {{ num1 }} + {{ num2 }} = {{ sum }}
  <button type="primary" bind:tap="changeNum1" data-step="{{2}}">num1的值+1</button>
</view>