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

在項(xiàng)目根目錄運(yùn)行cmd

沒(méi)有package.json文件輸入npm init -y初始化一下,初始化一個(gè)包管理

安裝MobX

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

小程序菜單欄工具–構(gòu)建npm

根目錄創(chuàng)建store文件夾,在文件夾下新建store.js ,這個(gè)文件是專門(mén)用來(lái)創(chuàng)建store的實(shí)例對(duì)象

import {observable} from 'mobx-miniprogram'
export const store = observable({
  userid: 123,
  username: 'as',
  numA: 1,
  numB: 2,
  // 計(jì)算屬性
  get sum() {
    return this.numA + this.numB
  },
  // action方法,用來(lái)修改store中數(shù)據(jù)
  UpdateNum1: action(function (step) {
    this.numA += step
  }),
  UpdateNum2: action(function (step) {
    this.numB += step
  })
})

在頁(yè)面使用store數(shù)據(jù)

.js文件

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
//在onload生命周期中掛載
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      // 數(shù)據(jù)以及計(jì)算屬性放fields里
      fields: ['numA', 'numB', 'userid', 'username', 'sum'],
      actions: ['UpdateNum1', 'UpdateNum2']
    })
  },
  //在onUnload中清理
    onUnload: function () {
    // 數(shù)據(jù)清理
    this.storeBindings.destroyStoreBindings()
  },

此時(shí)可以在頁(yè)面中用{{}}使用store中的數(shù)據(jù)

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

使用store中的action方法

頁(yè)面綁定一個(gè)方法,并且使用data-*進(jìn)行傳參

<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)
  },

打印

點(diǎn)擊之后就可以是頁(yè)面數(shù)據(jù)+1或者-1

在組件中使用store中的數(shù)據(jù)

在根目錄中新建components文件夾,在文件夾下新增number文件夾,
在number文件夾下右鍵點(diǎn)擊新增component,然后命名,會(huì)自動(dòng)生成四個(gè)同名文件

在組件的js文件中引入

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

//在Component中掛載
Component({
  // 通過(guò)storeBindingsBehavior來(lái)實(shí)現(xiàn)自動(dòng)綁定
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    // 數(shù)據(jù)源
    store,
    //fields中寫(xiě)store中的數(shù)據(jù)以及計(jì)算屬性
    fields: {
      // 前面是映射到組件中的名字,可以自定義,也可以填寫(xiě)一致
      //后面是store中的名字,字符串形式
      n1: 'numA',
      n2: 'numB',
      sumCount: 'sum'
    },
    //actions寫(xiě)store中的action方法
    actions: {
      UpdateNum2: 'UpdateNum2'
    }
  },
})

頁(yè)面中{{}}來(lái)使用store中的數(shù)據(jù)

頁(yè)面綁定一個(gè)方法,并且使用data-*進(jìn)行傳參

<!-- 組件中使用store數(shù)據(jù) -->
<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({
  /**
   * 組件的方法列表寫(xiě)在Component中的methods下
   */
  methods: {
    HandelNum(e) {
      console.log(e);
      this.UpdateNum2(e.target.dataset.newb)
    }
  }
})

在頁(yè)面中使用該組件

1. 在app.json中定義全局組件

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

2. 在頁(yè)面中使用組件

<my-numbers></my-numbers>

3. 點(diǎn)擊按鈕可實(shí)現(xiàn)數(shù)據(jù)+1 -1

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-569424.html

到了這里，關(guān)于小程序MobX創(chuàng)建store并實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！