微信小程序中Mobx的使用

前言

安装mobx

创建store仓库

前言

Mobx是全局数据共享，又叫做：状态管理，可以解决小程序组件之间数据共享的问题

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：
- mobx-miniprogram 用来创建 Store 实例对象
- mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

安装mobx

npm install --save mobx-miniprogram mobx-miniprogram-bindings

安装完不要忘记构建npm，这里默认大家都会哈

创建store仓库

我们在根目录下创建store文件夹然后建立store.js文件

我们在这个store.js文件进行状态仓库代码的编写

数据我们可以直接定义

计算属性使用get标记

方法使用action标记

详细代码如下：

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


export const store = observable({
  num1: 1,
  num2: 2,
  get sum() {
    return this.num1 + this.num2
  },
  updatanum1: action(function (res) {
    this.num1 += res
  }),
  updatanum2: action(function (res) {
    this.num2 += res
  })
})

使用mobx

页面使用mobx

1.从'mobx-miniprogram-bindings'中引入createStoreBindings

2.引入sotre仓库

3.在onLoad钩子中使用

createStoreBindings方法接收两个参数

第一个参数当前wx实例，第二个参数是一个对象，对象中传入store仓库，

数据通过fields数据定义，方法通过actions数组定义

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

onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num1', 'num2', 'sum'],
      actions: ['updatanum1','updatanum2']
    })
  },

组件使用mobx

1.从'mobx-miniprogram-bindings'引入storeBindingsBehavior

2.引入sotre仓库

3.在component中的behaviors中注册createStoreBindings

4.在storeBindings中传入store仓库

数据通过fields数据定义，方法通过actions数组定义

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

Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:['num1','num2','sum'],
    actions:['updatanum2','updatanum1']
  },  
})

页面和组件的引入和使用区别

都是从mobx-miniprogram-bindings中引入，并引入store仓库

但页面引入的是createStoreBindings，组件引入的是storeBindingsBehavior

页面是在onLoad钩子中通过createStoreBindings使用注册,并挂在vx实例上的storeBindings上

组件是在behaviors中注册，然后在storeBindings中使用