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

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

javascript 复制代码
npm install wxministore --save

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

javascript 复制代码
npm i

构建一下

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

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

然后 store.js 编写代码如下

javascript 复制代码
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 参考代码如下

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

js参考代码如下

javascript 复制代码
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上的

html 复制代码
<text>{{ $state.name }}</text>

展示一下name

可以看到 这个数据是可以实现不同page 乃至组件共享的

相关推荐
文心快码BaiduComate13 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
Emma歌小白3 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序