微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

2023-09-15 16:39:55

首先 我们打开终端 引入依赖

npm install wxministore --save

然后 如果你是新版开发者工具 就

npm i

构建一下

如果你是 老版本的 微信开发者工具 就打开右上角详情 选择本地管理 勾选 使用 npm 模块

然后 在根目录下创建一个 store.js 当然建在哪是你自己决定的 反正 后面能引入到就好

然后 store.js 编写代码如下

import Store from 'wxministore';

export default new Store({
  state: {
    name: "小狗狗"
  },
  methods: {
    publicfunction() {
        console.log("公共函数");
    }
  }
});

这里 state 中的就是我们的公共数据 我这里只定义了一个name
然后定义了一个公共的函数 publicfunction

然后 我们需要在 app.js中引入自己写的store
在这里插入图片描述
这里 我们引入一下 然后在对象中 store赋个值 放在根目录其实就是为了方便app.js引入
然后 我们再到具体的page界面中去使用
wxml 参考代码如下

<view>
    <view>{{ $state.name }}</view>
    <button bindtap="decrement">转变</button>
    <button bindtap="getdata">打印数据</button>
    <button bindtap="publicfunction">公共函数</button>
    <button bindtap="toChangeInto">跳转界面</button>
</view>

js参考代码如下

const app = getApp();
Page({
  data: {
  },
  onLoad() {
  },
  getdata() {
    console.log(app.store.getState().name);
  },
  decrement() {
      app.store.setState({
          name: "大猫猫"
      })
  },
  toChangeInto: function() {
    wx.navigateTo({
      url: '/pages/mint/mint'
    })
  }
 
})

首先 我们要通过getApp 得到一个app对象
然后 这里 我们想更改公共数据 就要 app.store.setState
读取有两种方式 app.store.getState() 和 $state
js中 我比较建议 app.store.getState() 页面上可以 $state
运行之后 会发现 name 的值 顺利展示了 小狗狗
在这里插入图片描述
然后 我们点击打印 触发getdata
我们可以确定 数据读取是肯定没问题的
在这里插入图片描述
然后我们点击转变 触发decrement
在这里插入图片描述
可以看到 更改也是完全没有问题
然后
我们点击 跳转 界面
要跳转的page 就一行代码 就是wxml上的

<text>{{ $state.name }}</text>

展示一下name
可以看到 这个数据是可以实现不同page 乃至组件共享的
在这里插入图片描述

更多推荐

MySQL 8.0 OCP (1Z0-908) 考点精析-架构考点5:数据字典(Data Dictionary)

文章目录MySQL8.0OCP(1Z0-908)考点精析-架构考点5:数据字典(DataDictionary)File-basedMetadataStorage(基于文件的元数据存储)TransactionalDataDictionary(事务数据字典)SerializedDictionaryInformation(S

相机One Shot标定

1原理说明原理部分网上其他文章[1][2]也已经说的比较明白了,这里不再赘述。2总体流程参考论文作者开源的Matlab代码[3]和github上的C++代码[4]进行说明(不得不说还是Matlab代码更优雅)论文方法总体分两部,第一部是在画面中找到所有的类棋盘格角点,第二步是角点的基础上构建出棋盘格形状。3模块说明3.

【Verilog 教程】3.1 Verilog 连续赋值

关键词:assign,全加器连续赋值语句是Verilog数据流建模的基本语句,用于对wire型变量进行赋值。:格式如下assignLHS_target=RHS_expression;LHS(lefthandside)指赋值操作的左侧,RHS(righthandside)指赋值操作的右侧。assign为关键词,任何已经声

Redis面试二“缓存击穿是什么”

条件缓存击穿是应为Redis某个缓存数据设置了过期时间,而刚好有大并发数据请求这个数据,导致DB有大量请求,引发DB崩溃。第一种方法就是设置互称锁当缓存失效时不立即删除缓存而是用setnx设置一个互斥锁,当操作完成后在loaddb,并回设缓存,否则重试get缓存方法,这样就减少了直接大量访问DB的请求。实现@Servi

Java高级-动态代理

动态代理1.介绍2.案例1.介绍publicinterfaceStar{Stringsing(Stringname);voiddance();}publicclassBigStarimplementsStar{privateStringname;publicBigStar(Stringname){this.name=n

关于ClickHouse的SQL操作

目录clickhouse和mysql的比较5.1create5.2Insert1.标准INSERT2.从表到表的插入5.3Update和Delete1.删除操作2.修改操作clickhouse和mysql的比较共同点:都是关系型数据库,支持SQL查询语言;支持事务处理,具备ACID特性(原子性、一致性、隔离性、持久性)

【多尺度无监督:Pansharpening】

Mun-GAN:AMultiscaleUnsupervisedNetworkforRemoteSensingImagePansharpening(Mun-GAN:一种多尺度无监督遥感图像泛锐化网络)在遥感图像融合中,全色锐化是一种遥感图像融合方法,旨在融合全色(PAN)图像和多光谱(MS)图像,以产生高分辨率的MS(H

ClickHouse(15)ClickHouse合并树MergeTree家族表引擎之GraphiteMergeTree详细解析

GraphiteMergeTree该引擎用来对Graphite数据(图数据)进行瘦身及汇总。对于想使用ClickHouse来存储Graphite数据的开发者来说可能有用。如果不需要对Graphite数据做汇总,那么可以使用任意的ClickHouse表引擎;但若需要,那就采用GraphiteMergeTree引擎。它能减

主打低功耗物联网国产替代,纵行科技ZT1826芯片以速率和灵敏度出圈

在低功耗物联网领域,国产替代的趋势越演越烈。9月20日,纵行科技在“IOTE2023深圳·物联网通信技术与应用高峰论坛”发表了“自主原创AdvancedM-FSK®调制技术助力国产替代和泛在物联”的演讲,并推出了ZT1826芯片,以“更低功耗、更低成本、更高性能”为差异化优势,想在低功耗物联网赛道上开辟出一条“国产替代

C4BUILDER—用于构建C4模型图的Web项目

c4builder是什么?c4builder:字面理解是产生C4架构图的构建器。c4builder是一个轻量级的nodejscli工具,用于仅使用文本构建、维护和共享软件体系结构项目。c4builder是一种架构设计工具,可以帮助开发人员和架构师描述和可视化软件系统的架构,包括系统的组件、关系、依赖和交互。它基于C4模

Git错误解决:如何处理“could not determine hash algorithm“问题

🌷🍁博主猫头虎(🐅🐾)带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学!欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作,工作效率翻倍~💐🌊《100天精通Golang(基础入门篇)》🐅学会Gol

热文推荐