wxMiniStore 技术文档

wxMiniStore 技术文档

1. 安装指南

1.1 通过 npm 安装

1. 在项目目录下初始化 npm：

   npm init
   

2. 安装 wxMiniStore：

   npm install wxministore -S
   

3. 在微信小程序开发工具中，勾选 使用npm模块，然后选择 工具-构建 npm。

1.2 通过 clone 安装

1. 将本项目中的 lib/store.js 复制到你的项目中。
2. 在 app.js 中引入：

   import Store from "./util/store.js";
   // 或者 const Store = require('./util/store.js');
   App({});
   

2. 项目的使用说明

2.1 实例化全局状态

let store = new Store({
  state: {
    msg: "这是一个全局状态",
    user: {
      name: "李四",
    },
  },
});
console.log(store.getState().msg); // 这是一个全局状态 1.2.6+

2.2 在 App 中注入 store

App({
  onLaunch: function () {},
  store: store,
});

2.3 在页面上使用

在 wxml 中使用 $state：

<view>{{$state.user.name}}：{{$state.msg}}</view>

在 template 中使用 $state：

<template name="t1">
  <view>{{$state.msg}}</view>
</template>
<template is="t1" data="{{$state,arg1,arg2}}" />

2.4 修改状态

使用 app.store.setState 更新状态：

const app = getApp();
App.Page({
  onLoad: function () {
    app.store.setState({
      msg: "我被修改了，呜呜...",
    });
  },
});

3. 项目API使用文档

3.1 new Store(options: Object)

创建一个新的 Store 实例。

3.2 store.setState(data: Object, callback: Function)

更新全局状态。

3.3 store.$state: Object

获取全局状态对象。

3.4 store.$r: Array

获取所有页面或组件的实例。

3.5 store.getState: () => Object

获取全局状态的拷贝。

3.6 store.clearState(callback: Function)

清空全局状态。

4. 项目安装方式

4.1 通过 npm 安装

npm install wxministore -S

4.2 通过 clone 安装

将 lib/store.js 复制到项目中，并在 app.js 中引入。

---

通过以上步骤，你可以顺利安装和使用 wxMiniStore 进行全局状态管理。如果在使用过程中遇到问题，可以参考项目文档或提交 issue 进行反馈。