微信小程序中如何使用store數(shù)據(jù)共享
全局?jǐn)?shù)據(jù)共享 全局?jǐn)?shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問題，開發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有：Vuex、Redux、MobX等
在小程序中，可用 mobx-miniprogram (用來創(chuàng)建 Store 實例對象) 配合 mobx-miniprogram-bindings (用來把 Store 中的共享數(shù)據(jù)或方法，綁定到組件和頁面中使用)實現(xiàn)全局?jǐn)?shù)據(jù)共享
安裝 MobX 相關(guā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文件
在這個 JS 文件中，專門來創(chuàng)建 Store 的實例對象
import {observable,action} from 'mobx-miniprogram'
export const store = observable({ //2、創(chuàng)建共享數(shù)據(jù)，并向外暴露出去
//定義數(shù)據(jù)字段
namesValue:'文龍剛',
shopCarTotalCount:0,//購物車數(shù)量
sitesPosition:wx.getStorageSync('sitesInfo')||'',//提貨點
RestDay:true,
shopTotalCount:action(function(step){//購物車總數(shù)
console.log('傳遞過來的值是：',step)
this.shopCarTotalCount+=step
}),
setSitesPosition:action(function(position){//設(shè)置提貨點
this.sitesPosition=position
}),
getRestDay:action(function(type){
this.RestDay=!this.RestDay
})
})第三步：將 Store 中的成員綁定到頁面中
wxml：
<view>
<!-- 這是調(diào)用參數(shù)的方法 -->
<view>
namesValue:{{namesValue}}
</view>
<!-- 這是調(diào)用方法的 -->
<view>
購物車數(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'
//因為我是將store.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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript面向?qū)ο笾钊肓私釫S6的class
class盡管只算是一個語法糖,但它卻是語言規(guī)范方面的一大成就,也對之前的繼承進行了一定的增強,下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了JavaScript的流程控制語句，感興趣的小伙伴們可以參考一下2015-11-11
網(wǎng)上關(guān)于這方面的文章有很多，重復(fù)的東西本文不再贅述，僅提供思路，并解釋一些其他文章講述模糊的地方。重點給大家介紹下rem.有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了SWFObject基本用法,實例分析了SWFObject操作Flash文件的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了微信小程序登錄時如何獲取input框中的內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了原生JS實現(xiàn)的簡單小鐘表功能,涉及javascript結(jié)合定時器的數(shù)值運算與頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
允許網(wǎng)頁寬度自動調(diào)整的"自適應(yīng)網(wǎng)頁設(shè)計"到底是怎么做到的？下面我們就來通過示例來探討下。2015-06-06
這篇文章主要介紹了jQuery插件datepicker 日期連續(xù)選擇的方法和示例，有需要的小伙伴可以參考下。2015-06-06