亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序中如何使用store數(shù)據(jù)共享

 更新時(shí)間:2023年04月11日 15:18:46   作者:前端-文龍剛  
全局?jǐn)?shù)據(jù)共享?全局?jǐn)?shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問(wèn)題,開(kāi)發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有:Vuex、Redux、MobX等,這篇文章主要介紹了微信小程序中如何使用store數(shù)據(jù)共享,需要的朋友可以參考下

全局?jǐn)?shù)據(jù)共享 全局?jǐn)?shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問(wèn)題,開(kāi)發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有:Vuex、Redux、MobX等

在小程序中,可用 mobx-miniprogram (用來(lái)創(chuàng)建 Store 實(shí)例對(duì)象) 配合 mobx-miniprogram-bindings (用來(lái)把 Store 中的共享數(shù)據(jù)或方法,綁定到組件和頁(yè)面中使用)實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享

安裝 MobX 相關(guān)的包 在項(xiàng)目中運(yùn)行如下命令,安裝 MobX相關(guān)的包:(注意要啟用管理員權(quán)限) 安裝完成重新構(gòu)建 npm

第一步:

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

安裝完成后選擇:工具-》構(gòu)建npm

第二步:

在根目錄下創(chuàng)建store文件夾,并在其中創(chuàng)建store.js文件

在這個(gè) JS 文件中,專(zhuān)門(mén)來(lái)創(chuàng)建 Store 的實(shí)例對(duì)象

import {observable,action} from 'mobx-miniprogram' 
 
export const store = observable({ //2、創(chuàng)建共享數(shù)據(jù),并向外暴露出去
    //定義數(shù)據(jù)字段
    namesValue:'文龍剛',
    shopCarTotalCount:0,//購(gòu)物車(chē)數(shù)量
    sitesPosition:wx.getStorageSync('sitesInfo')||'',//提貨點(diǎn)
    RestDay:true,
 
    shopTotalCount:action(function(step){//購(gòu)物車(chē)總數(shù)
        console.log('傳遞過(guò)來(lái)的值是:',step)
        this.shopCarTotalCount+=step
    }),
    setSitesPosition:action(function(position){//設(shè)置提貨點(diǎn)
      this.sitesPosition=position
    }),
    getRestDay:action(function(type){
      this.RestDay=!this.RestDay
    })
})

 第三步:將 Store 中的成員綁定到頁(yè)面中

wxml:

<view>
  <!-- 這是調(diào)用參數(shù)的方法 -->
  <view>
    namesValue:{{namesValue}}
  </view>
  <!-- 這是調(diào)用方法的 -->
  <view>
    購(gòu)物車(chē)數(shù)量:{{shopCarTotalCount}}
  </view>
  <view>
    <button bindtap="addShopCarTotalCount" data-step='1'>增加</button>
  </view>
 
  <!-- 更改狀態(tài) -->
  <view>
    當(dāng)前狀態(tài):{{RestDay}}
  </view>
  <button bindtap="changeType">更改狀態(tài)</button>
</view>

JS:

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../libs/store.js'
//因?yàn)槲沂菍tore.js文件放在libs中了
Page({
    onLoad(options) {
        //第二步:這是store中參數(shù)及方法的導(dǎo)入
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: ['namesValue','shopCarTotalCount', 'RestDay', 'sitesPosition'],
            actions: ['shopTotalCount',  'setSitesPosition','getRestDay'],
        })
  },
 
})

 ---------------------------------將 Store 成員綁定到組件中----------------------------

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../libs/store.js'
Page({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 數(shù)據(jù)源
    store, //指定要綁定的store
    fields:{//指定要綁定的字段數(shù)據(jù)
      numA:()=>store.numA,     //綁定字段的第一種方式
      numB:(store)=>store.numB,//綁定字段的第二種方式
      sum:'sum',               //綁定字段的第三種方式
    },
    actions:{ //指定要綁定的方法
      updateNum2:'updateNum2'
    }
  },
})

---------------------------------在組件中使用 Store 中的成員---------------------------------

//組件的 .wxml結(jié)構(gòu)
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>
//組件的 .js結(jié)構(gòu)
methods: {
  btnHander2(e){
    this.updateNum2(e.target.dataset.step)
  }
}

到此這篇關(guān)于微信小程序中使用store數(shù)據(jù)共享的文章就介紹到這了,更多相關(guān)小程序store數(shù)據(jù)共享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript面向?qū)ο笾钊肓私釫S6的class

    JavaScript面向?qū)ο笾钊肓私釫S6的class

    class盡管只算是一個(gè)語(yǔ)法糖,但它卻是語(yǔ)言規(guī)范方面的一大成就,也對(duì)之前的繼承進(jìn)行了一定的增強(qiáng),下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • 詳解JavaScript的流程控制語(yǔ)句

    詳解JavaScript的流程控制語(yǔ)句

    這篇文章主要介紹了JavaScript的流程控制語(yǔ)句,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 手機(jī)端頁(yè)面rem寬度自適應(yīng)腳本

    手機(jī)端頁(yè)面rem寬度自適應(yīng)腳本

    網(wǎng)上關(guān)于這方面的文章有很多,重復(fù)的東西本文不再贅述,僅提供思路,并解釋一些其他文章講述模糊的地方。重點(diǎn)給大家介紹下rem.有需要的小伙伴可以參考下。
    2015-05-05
  • SWFObject基本用法實(shí)例分析

    SWFObject基本用法實(shí)例分析

    這篇文章主要介紹了SWFObject基本用法,實(shí)例分析了SWFObject操作Flash文件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • 微信小程序登錄時(shí)如何獲取input框中的內(nèi)容

    微信小程序登錄時(shí)如何獲取input框中的內(nèi)容

    這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • 原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能示例

    原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能示例

    這篇文章主要介紹了原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能,涉及javascript結(jié)合定時(shí)器的數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
    2018-08-08
  • 微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案)

    微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案)

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個(gè)屬性就可以了,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • D3.js實(shí)現(xiàn)餅狀圖的方法詳解

    D3.js實(shí)現(xiàn)餅狀圖的方法詳解

    相信大家都知道圖表是數(shù)據(jù)圖形化的表示,通過(guò)形象的圖表來(lái)展示數(shù)據(jù),比如條形圖,折線(xiàn)圖,餅圖等。可視化圖表可以幫助開(kāi)發(fā)者更容易理解復(fù)雜的數(shù)據(jù),提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性。現(xiàn)在就讓我們大家一起來(lái)學(xué)習(xí)用D3.js來(lái)實(shí)現(xiàn)餅圖的方法,有需要的可以參考借鑒。
    2016-09-09
  • JS制作手機(jī)端自適應(yīng)縮放顯示

    JS制作手機(jī)端自適應(yīng)縮放顯示

    允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整的"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"到底是怎么做到的?下面我們就來(lái)通過(guò)示例來(lái)探討下。
    2015-06-06
  • jQuery插件datepicker 日期連續(xù)選擇

    jQuery插件datepicker 日期連續(xù)選擇

    這篇文章主要介紹了jQuery插件datepicker 日期連續(xù)選擇的方法和示例,有需要的小伙伴可以參考下。
    2015-06-06

最新評(píng)論