小程序MobX创建store并实现全局数据共享

查看小程序根目录中是否存在package.json文件

在项目根目录运行cmd

没有package.json文件输入npm init -y初始化一下,初始化一个包管理

安装MobX

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

小程序菜单栏工具–构建npm

根目录创建store文件夹,在文件夹下新建store.js ,这个文件是专门用来创建store的实例对象

import {observable} from 'mobx-miniprogram'
export const store = observable({
  userid: 123,
  username: 'as',
  numA: 1,
  numB: 2,
  // 计算属性
  get sum() {
    return this.numA + this.numB
  },
  // action方法,用来修改store中数据
  UpdateNum1: action(function (step) {
    this.numA += step
  }),
  UpdateNum2: action(function (step) {
    this.numB += step
  })
})

在页面使用store数据

.js文件

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
//在onload生命周期中挂载
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      // 数据以及计算属性放fields里
      fields: ['numA', 'numB', 'userid', 'username', 'sum'],
      actions: ['UpdateNum1', 'UpdateNum2']
    })
  },
  //在onUnload中清理
    onUnload: function () {
    // 数据清理
    this.storeBindings.destroyStoreBindings()
  },

此时可以在页面中用{{}}使用store中的数据

<view>userid：{{userid}}</view>
<view>username：{{username}}</view>

使用store中的action方法

页面绑定一个方法,并且使用data-*进行传参

<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button bindtap="change" data-newA="{{1}}">numA+1</van-button>
<van-button bindtap="change" type='warning' data-newA="{{-1}}">numA-1</van-button>

在js中使用

  change(e) {
    console.log(e);
    const newA = e.target.dataset.newa
    this.UpdateNum1(newA)
  },

打印

点击之后就可以是页面数据+1或者-1

在组件中使用store中的数据

在根目录中新建components文件夹,在文件夹下新增number文件夹,
在number文件夹下右键点击新增component,然后命名,会自动生成四个同名文件

在组件的js文件中引入

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

//在Component中挂载
Component({
  // 通过storeBindingsBehavior来实现自动绑定
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // 数据源
    store,
    //fields中写store中的数据以及计算属性
    fields: {
      // 前面是映射到组件中的名字,可以自定义,也可以填写一致
      //后面是store中的名字,字符串形式
      n1: 'numA',
      n2: 'numB',
      sumCount: 'sum'
    },
    //actions写store中的action方法
    actions: {
      UpdateNum2: 'UpdateNum2'
    }
  },
})

页面中{{}}来使用store中的数据

页面绑定一个方法,并且使用data-*进行传参

<!-- 组件中使用store数据 -->
<view>{{n1}}+{{n2}}={{sumCount}}</view>
<van-button bindtap="HandelNum" data-newB="{{1}}">numB+1</van-button>
<van-button bindtap="HandelNum" type='warning' data-newB="{{-1}}">numB-1</van-button>

在组件js文件中定义HandelNum方法

Component({
  /**
   * 组件的方法列表写在Component中的methods下
   */
  methods: {
    HandelNum(e) {
      console.log(e);
      this.UpdateNum2(e.target.dataset.newb)
    }
  }
})

在页面中使用该组件

1. 在app.json中定义全局组件

"usingComponents": {
    "my-numbers": "/components/numbers/numbers"
    "van-button": "@vant/weapp/button/index"
  }

2. 在页面中使用组件

<my-numbers></my-numbers>

3. 点击按钮可实现数据+1 -1