微信小程序中如何使用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
class盡管只算是一個(gè)語(yǔ)法糖,但它卻是語(yǔ)言規(guī)范方面的一大成就,也對(duì)之前的繼承進(jìn)行了一定的增強(qiáng),下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下2022-03-03微信小程序登錄時(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)單小鐘表功能,涉及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í)別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個(gè)屬性就可以了,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01