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

这篇具有很好参考价值的文章主要介绍了微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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
wxministore,微信小程序,小程序
这里我们引入一下然后在对象中 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 的值顺利展示了小狗狗
wxministore,微信小程序,小程序
然后我们点击打印触发getdata
我们可以确定数据读取是肯定没问题的

然后我们点击转变触发decrement

可以看到更改也是完全没有问题
然后
我们点击跳转界面
要跳转的page 就一行代码就是wxml上的