微信小程序_22,全局数据共享

什么是全局数据共享:

全局数据共享(又叫做:状态管理),是为了解决组件之间数据共享的问题
开发中常用的全局数据共享方案有:Vuex,Redux,Mobx等

小程序中的全局数据共享方案:

在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享,其中:

• mobx-miniprogram用来创建Store示例对象
• mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用

安装Mobx相关的包:

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
1

注意:安装完相关的包之后,记得删除miniprogram_npm目录后.重新构建npm

使用:

在项目目录下创建stroe文件夹,并创建对应的js文件:

在js文件中导出store:

// 在这个js文件中专门用来创建store实例对象
import {observable} from 'mobx-miniprogram'

export const store=observable({})
1
2
3
4

创建Mobx的stroe实例:

// 在这个js文件中专门用来创建store实例对象
import {
  action,
  observable
} from 'mobx-miniprogram'

export const store = observable({
  // 数据字段：
  num1: 123,
  num2: 321,
  step: 2,
  // 计算属性：
  get sum() {
    return this.num1 + this.num2
  },
  // actions
  updateNum1: action(function () {
    this.num1 += step
  }),
  updateNum2: action(function () {
    this.num2 += step
  }),
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

将store中的成员绑定到页面中:

在页面的js中:

//页面的监听js文件
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  store
} from '../../store/store'


Page({
  onLoad: function () {
    // 监听页面加载
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num1', 'num2', 'sum'],
      actions: ['updateNum1', 'updateNum2']
    })
  },
  onUnload: function () {
    // 生命周期函数,监听页面卸载
    this.storeBindings.destroyStoreBindings()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

此时可以看下数据是否已经计算:

将store中的fun绑定到页面中:

{{num1}}+{{num2}}={{sum}}
num1+1
num1-1
1
2
3

// index.js
// 获取应用实例
const app = getApp()
//页面的监听js文件
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  store
} from '../../store/store'

Page({
  onLoad: function () {
    // 监听页面加载
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num1', 'num2', 'sum'],
      actions: ['updateNum1', 'updateNum2']
    })
  },
  btnHandler1(e) {
    this.updateNum1(e.target.dataset.step)
  },
  onUnload: function () {
    // 生命周期函数,监听页面卸载
    this.storeBindings.destroyStoreBindings()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

store.js中有不同的写法,示例可以查看下面:

在组件中引入store时,可以映射store中对应的对象或者变量名,如下面的behaviors,storeBindings和actions:

// pages/mynumber/mynumber.js
import {
  storeBindingsBehavior
} from "mobx-miniprogram-bindings"
import {
  store
} from "../../store/store"
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings:{
    // 数据源
    store,
    fields:{
      // 映射名:'组件中的变量名',可以简写
      num1:'num1',
      num2:'num2',
      sum:'sum'
    },
    //store中的function需要在actions下映射,这里也可以简写的
    actions:{
        updateNum1:'updateNum1'
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24