跳到主要内容
Huiboxes

输入关键词开始搜索…

↑↓切换
Esc

小程序状态管理（MobX）

小程序中可以使用mobx-miniprogram配合mobx-miniprogram-bindings进行状态管理（全局数据管理）。

前端1分钟阅读

小程序中可以使用mobx-miniprogram配合mobx-miniprogram-bindings进行状态管理（全局数据管理）。

npm i -S mobx-miniprogram mobx-miniprogram-bindings

在项目根目录新建store文件夹，专门存放状态管理相关的文件。创建一个store.js，存放全局数据：

store.js
import { observable } from 'mobx-miniprogram';


export const store = observable({
  num1: 1,
  num2: 2,
});

类似vuex中的getter。

store.js
import { observable } from 'mobx-miniprogram';


export const store = observable({
  num1: 1,
  num2: 2,


  get sum() {
    // 计算属性，当使用sum时得到的值为 num1 与 num2 的和
    return this.num1 + this.num2;
  },
});

通过action来修改store中的数据。

store.js
import { observable, action } from 'mobx-miniprogram';


export const store = observable({
  num1: 1,
  num2: 2,


  get sum() {
    return this.num1 + this.num2;
  },
  updateNum1: action(function (step) {
    // 注意，此处是用action包住一个函数，函数的第一个参数是触发action时传的参数
    thjis.num1 += step;
  }),
});

引入store与createStoreBindings方法，将全局数据绑定到页面中。使用时只需要在wxml文件中使用Mustache语法。

// home页面的 home.js


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


Page({
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store, // 传入store
      fields: ['num1', 'num2', 'sum'], // 需要什么数据都在此处声明
      actions: ['updateNum1'], // action在此声明，使用actions时 this.updateNum1即可触发action
    });
  },
  onUnload: function () {
    this.storeBindings.destroyStoreBingdings(); // 页面卸载时销毁数据绑定
  },
});

与在页面中使用非常相似。

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


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

评论