微信小程序-（十二）全局数据共享

本文最后更新于：May 13, 2023 pm

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

目录

全局数据共享（状态管理），为了解决组件之间数据共享的问题。在小程序中，可以使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中，mobx-miniprogram 用来创建 Store实例对象，mobx-miniprogram-bindings 用来把 Stroe 中的共享数据或方法，绑定到组件或页面中使用。

安装

1
2
npm install --save mobx-miniprogram
npm install --save mobx-miniprogram-bindings

安装完毕后，仍然需要重新构建npm。

创建mobx的Store实例对象

新创建一个store文件夹，在其中创建一个 store.js 的文件。这个文件专门用来创建store实例对象。

提示：可以理解成Java中的类，类中的成员变量私有化，只提供方法给外界使用从而达到访问成员变量。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// store/store.js

import {observable,action} from 'mobx-miniprogram'
export const store = observable({
  name:'墨水记忆',
  url: 'www.tothefor.com',
  //计算属性
  get site(){ //get表示只能读取
    return this.name+"的链接为："+this.url
  },
  //action函数，自定义方法
  updateName:action(function(newName){
      this.name=newName
  }),
  updateUrl:action(function(newUrl){
    this.url = newUrl
  })
})

绑定Store成员到页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  // pages/message/message.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

  Page({

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.storeBindings = createStoreBindings(this,{
        store, //数据源
        fields: ['name','url','site'], //数据或计算属性
        actions: ['updateName','updateUrl'] //方法
      })
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
      this.storeBindings.destroyStoreBindings()
    }
  })

使用Store中的成员

1
2
3
4
5
6
7
8
9
<!--pages/message/message.wxml-->

<van-button type="danger" bindtap="chN" data-name="DragonOne">点击改变Name</van-button> <br/>
<van-button type="danger" bindtap="chU" data-url="www.moreoj.cn">点击改变url</van-button> <br/>
<!-- data-name为传参 -->

<van-button type="danger">{{name}}</van-button> <br/>
<van-button type="danger">{{url}}</van-button> <br/>
<van-button type="danger">{{site}}</van-button> <br/>
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
29
30
31
32
  // pages/message/message.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

  Page({

    chN(e){
      this.updateName(e.target.dataset.name)
    },
    chU(e){
      this.updateUrl(e.target.dataset.url)
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.storeBindings = createStoreBindings(this,{
        store,
        fields: ['name','url','site'],
        actions: ['updateName','updateUrl']
      })
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
      this.storeBindings.destroyStoreBindings()
    },

  })

绑定Store中的成员到组件中

1
2
3
4
5
6
7
8
9
10
11
<!--components/test/test.wxml-->
<view>
  <text>这里是组件中的内容</text>
<van-button type="danger" bindtap="chN" data-name="DragonOne">点击改变Name</van-button> <br/>
<van-button type="danger" bindtap="chU" data-url="www.moreoj.cn">点击改变url</van-button> <br/>
  
<van-button type="danger">{{name}}</van-button> <br/>
<van-button type="danger">{{url}}</van-button> <br/>
<van-button type="danger">{{site}}</van-button> <br/>
</view>

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
29
30
31
32
// components/test/test.js
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior],

  storeBindings:{ 
    store, //需要绑定的数据源store
    fields: {
      name: ()=>store.name, // 绑定字段的第一种方式
      url: (store)=>store.url, // 绑定字段的第二种方式
      site: 'site' // 绑定字段的第三种方式
    },
    actions:{ //指定要绑定的方法
      updateName: 'updateName',
      updateUrl: 'updateUrl'
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    chN(e){
      this.updateName(e.target.dataset.name)
    },
    chU(e){
      this.updateUrl(e.target.dataset.url)
    },
  }
})