经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序中如何使用store数据共享
来源:jb51  时间:2023/4/12 11:14:31  对本文有异议

全局数据共享 全局数据共享(状态管理)是为了解决组件之间数据共享的问题,开发中常用的全局数据共享方案有:Vuex、Redux、MobX等

在小程序中,可用 mobx-miniprogram (用来创建 Store 实例对象) 配合 mobx-miniprogram-bindings (用来把 Store 中的共享数据或方法,绑定到组件和页面中使用)实现全局数据共享

安装 MobX 相关的包 在项目中运行如下命令,安装 MobX相关的包:(注意要启用管理员权限) 安装完成重新构建 npm

第一步:

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

安装完成后选择:工具-》构建npm

第二步:

在根目录下创建store文件夹,并在其中创建store.js文件

在这个 JS 文件中,专门来创建 Store 的实例对象

  1. import {observable,action} from 'mobx-miniprogram'
  2. export const store = observable({ //2、创建共享数据,并向外暴露出去
  3. //定义数据字段
  4. namesValue:'文龙刚',
  5. shopCarTotalCount:0,//购物车数量
  6. sitesPosition:wx.getStorageSync('sitesInfo')||'',//提货点
  7. RestDay:true,
  8. shopTotalCount:action(function(step){//购物车总数
  9. console.log('传递过来的值是:',step)
  10. this.shopCarTotalCount+=step
  11. }),
  12. setSitesPosition:action(function(position){//设置提货点
  13. this.sitesPosition=position
  14. }),
  15. getRestDay:action(function(type){
  16. this.RestDay=!this.RestDay
  17. })
  18. })

 第三步:将 Store 中的成员绑定到页面中

wxml:

  1. <view>
  2. <!-- 这是调用参数的方法 -->
  3. <view>
  4. namesValue:{{namesValue}}
  5. </view>
  6. <!-- 这是调用方法的 -->
  7. <view>
  8. 购物车数量:{{shopCarTotalCount}}
  9. </view>
  10. <view>
  11. <button bindtap="addShopCarTotalCount" data-step='1'>增加</button>
  12. </view>
  13. <!-- 更改状态 -->
  14. <view>
  15. 当前状态:{{RestDay}}
  16. </view>
  17. <button bindtap="changeType">更改状态</button>
  18. </view>

JS:

  1. import {createStoreBindings} from 'mobx-miniprogram-bindings'
  2. import {store} from '../../libs/store.js'
  3. //因为我是将store.js文件放在libs中了
  1. Page({
  2. onLoad(options) {
  3. //第二步:这是store中参数及方法的导入
  4. this.storeBindings = createStoreBindings(this, {
  5. store,
  6. fields: ['namesValue','shopCarTotalCount', 'RestDay', 'sitesPosition'],
  7. actions: ['shopTotalCount', 'setSitesPosition','getRestDay'],
  8. })
  9. },
  10. })

 ---------------------------------将 Store 成员绑定到组件中----------------------------

  1. import {createStoreBindings} from 'mobx-miniprogram-bindings'
  2. import {store} from '../../libs/store.js'
  1. Page({
  2. behaviors:[storeBindingsBehavior],
  3. storeBindings:{
  4. // 数据源
  5. store, //指定要绑定的store
  6. fields:{//指定要绑定的字段数据
  7. numA:()=>store.numA, //绑定字段的第一种方式
  8. numB:(store)=>store.numB,//绑定字段的第二种方式
  9. sum:'sum', //绑定字段的第三种方式
  10. },
  11. actions:{ //指定要绑定的方法
  12. updateNum2:'updateNum2'
  13. }
  14. },
  15. })

---------------------------------在组件中使用 Store 中的成员---------------------------------

  1. //组件的 .wxml结构
  2. <view>{{numA}}+{{numB}}={{sum}}</view>
  3. <van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button>
  4. <van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>
  1. //组件的 .js结构
  2. methods: {
  3. btnHander2(e){
  4. this.updateNum2(e.target.dataset.step)
  5. }
  6. }

到此这篇关于微信小程序中使用store数据共享的文章就介绍到这了,更多相关小程序store数据共享内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号