微信小程序中如何使用store數(shù)據(jù)共享
全局數(shù)據(jù)共享 全局數(shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問題,開發(fā)中常用的全局數(shù)據(jù)共享方案有:Vuex、Redux、MobX等
在小程序中,可用 mobx-miniprogram (用來創(chuàng)建 Store 實例對象) 配合 mobx-miniprogram-bindings (用來把 Store 中的共享數(shù)據(jù)或方法,綁定到組件和頁面中使用)實現(xià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微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01