# wxMiniStore
[![NPM version](https://img.shields.io/npm/v/wxministore.svg)](https://www.npmjs.com/package/wxministore)
[![License](https://img.shields.io/npm/l/wxministore.svg)](https://www.npmjs.com/package/wxministore)
一个基于原生小程序的 mini 全局状态管理库,跨页面/组件数据共享渲染。
- 全局状态 state 支持所有 Page 和 Component,更新时使用独有 diff 能力,性能更强。
- 周期监听 pageListener 能监听所有页面的 onLoad、onShow 等周期事件,方便埋点、统计等行为。
- 全局事件 methods,一处声明,所有 wxml 直接可用的函数。
- 适合原生小程序,即使后期引入,也只需增加几行代码。
## 更新日志
### 1.3.1
\[2021.1.13\]
`U`:优化pageListener中的onShareAppMessage能力,使其支持自定义全局分享。
### 1.3.0
\[2020.7.28\]
`A`:新增 [store.prototype.clearState](#clearState) 清除状态,by [@zkl2333](https://github.com/zkl2333)
`F`:新增polyfill,修复 [#25](https://github.com/xiaoyao96/wxMiniStore/issues/25)。
`F`:单词错误 pageLisener 改为 pageListener(已做向下兼容可放心升级)。
### 1.2.9
\[2020.3.31\] `A`: 新增[debug 字段](#other),用于开启/关闭 setState 时的 console。
### 导航
- [全局状态开始](#start)
- [安装及引入](#start-1)
- [实例化](#state)
- [App 中注入](#start-3)
- [页面上使用](#start-4)
- [修改状态](#start-5)
- [修改状态注意事项](#start-6)
- [页面周期监听](#lisener)
- [全局方法](#f)
- 性能优化
- [局部状态模式](#part)
- [useProp](#useProp)
- [其他](#other)
- [non-writable 解决方案](#nonWritable)
- [Api 说明](#api)
- [总结及建议](#end)
## <div id="start">开始</div>
在开始前,你可以 clone 或下载本项目,用微信开发工具打开 demo 目录来查看效果。
### <div id="start-1">1.安装及引入</div>
目前有两种引入方式:
#### npm
首先你需要 npm init 在项目目录下生成 package.json 后,再进行安装。
```cmd
npm init
npm install wxministore -S
```
然后在微信小程序右上角详情中勾选 `使用npm模块`。
接着选择左上角 工具-构建 npm。
这样你就可以在项目中导入了。
```js
//app.js中
import Store from "wxministore";
//或者 const Store = require('wxministore');
App({});
```
#### clone
如果不太熟悉 npm 没关系,你可以将本项目中 lib/store.js 复制到你的项目中,并在`app.js第一行`引入:
```js
//app.js中
import Store from "./util/store.js";
//或者 const Store = require('./util/store.js');
App({});
```
### <div id="state">2. 实例化一个全局状态 state</div>
Store 为构造函数,所以需要通过 new 关键字实例化,参数为 object 类型,下面我们初始化一个 state。
```js
let store = new Store({
state: {
msg: "这是一个全局状态",
user: {
name: "李四",
},
},
});
console.log(store.getState().msg); //这是一个全局状态 1.2.6+
console.log(store.$state.msg); //这是一个全局状态 (不推荐)
App({});
```
初始化完成,我们如需在 js 中获取状态,可使用 `store.getState()` 获取全局状态,`1.2.6+`版本强烈推荐此方式。
store.\$state 也可获取,但不建议使用。
### <div id="start-3">3.在 App 中注入 store</div>
这么做是为了在其他页面中使用 store。
```js
App({
onLaunch: function () {},
store: store,
});
```
### <div id="start-4">4.页面上使用</div>
在所有 wxml 中,可使用$state.x。
其中$state 为全局状态的容器,里面包含了所有的全局状态。
```html
<view>{{$state.user.name}}:{{$state.msg}}</view>
```
显示为 李四:这是一个全局状态。
如果在 template 文件中使用,需在属性 data 中引用\$state
```html
<!-- 这是一个template -->
<template name="t1">
<view>{{$state.msg}}</view>
</template>
<!-- 这是引用位置 -->
<template is="t1" data="{{$state,arg1,arg2}}" />
<!-- 相当于<template is="t1" data="{{$state:$state,arg1:arg1,arg2:arg2}}" /> -->
```
在版本 1.2.1+建议使用 App.Page 和 App.Component 创建页面和组件,当然也不是必须。详情查看[nonWritable](#nonWritable)
```js
// 没问题
Page({
//...
});
// 更好
App.Page({
//...
});
```
如果使用时,页面空白,说明你没有在 App 创建前 new Store。
### <div id="start-5">5.如何修改状态</div>
使用 app.store.setState 进行更新状态。如:
```js
const app = getApp();
App.Page({
data: {},
onLoad: function () {
//所有wxml中的$state.msg会同步更新
app.store.setState({
msg: "我被修改了,呜呜...",
});
},
});
```
### <div id="start-6">修改状态注意事项</div>
```js
// 错误的示范 视图不会更新
let { user } = app.store.$state;
user.name = "张三";
app.store.setState({
user,
});
//正确的示范
let { user } = app.store.getState();
user.name = "张三";
app.store.setState({
user,
});
```
获取全局状态需使用 app.store.getState()。
## <div id="lisener">周期监听 pageListener</div>
在有的场景,我希望每个页面在 onLoad 时执行一个方法(如统计页面,监听等)。原本做法是一个一个的复制粘贴,很麻烦。
现在我们可以把某个周期,写入 pageListener 中,Store 会自动在`相应周期优先执行pageListener然后再执行原页面周期内事件`。
### 1.加入监听
现在以监听 onLoad 为例, 在 Store 中新增一个 pageListener 对象,将需要监听的周期写入:
```js
// store中
let store = new Store({
//状态
state: {
//...
},
//方法
methods: {
//...
},
//页面监听
pageListener: {
onLoad(options) {
console.log("我在" + this.route, "参数为", options);
},
},
});
```
就这样所有页面的 onLoad,将会优先执行此监听。接下来看页面内代码:
```js
// index/index.js 页面
App.Page({
onLoad() {
console.log(2);
},
});
```
执行结果为:
```js
// 我在index/index 参数为 {...}
// 2
```
### 2.全局分享 `1.3.1+`
现支持全局分享功能,以方便开发者能一次性定义所有页面的分享功能。
```js
// store中
let store = new Store({
//页面监听
pageListener: {
onShareAppMessage(res){
return {
title: '全局分享',
path: '/index/index'
}
}
},
});
```
store中onShareAppMessage返回值的优先级是`次于`页面级的,所以当Page中有onShareAppMessage且有返回值,则会优先使用Page中的分享。
### 3.没有第二步...
总结:
- 先执行 pageListener 监听,后执行原本页面中周期。
- 还支持其他周期事件 ['onLoad', 'onShow', 'onReady', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']
## <div id="f">全局方法 methods</div>
新增 methods,全局可使用。
适用于各个 wxml 中的交互事件(bindtap 等), 你可以封装一些常用的交互事件,如 行为埋点,类型跳转等。
### 1.创建一个全局方法
在原有状态基础上,新增一个 methods 对象,写入你的全局方法:
```js
let store = new Store({
//状态
state: {
msg: "这是一个全局状态",
},
//方法
methods: {
goAnyWhere(e) {
wx.navigateTo({
url: e.currentTarget.dataset.url,
});
},
sayHello() {
console.log("hello");
},
},
});
```
这里创建了一个全局封装的跳转 goAnyWhere。
### 2.使用全局方法
在 wxml 中,直接使用`方法名`调用:
```html
<view bind
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序,农产品销售平台
共844个文件
svg:132个
js:128个
xml:111个
需积分: 18 4 下载量 158 浏览量
2023-02-19
08:29:59
上传
评论
收藏 6.92MB ZIP 举报
温馨提示
微信小程序开发,后端使用springboot,idea,前端使用vue,微信开发者工具。功能比较齐全,系统分为管理员、卖家、买家三种角色。有小程序前端,浏览器管理系统界面。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序,农产品销售平台 (844个子文件)
.babelrc 202B
Order.class 12KB
Commodity.class 10KB
CommodityController.class 8KB
OrderController.class 8KB
Shop.class 7KB
Comment.class 6KB
Chat.class 5KB
JoinController.class 5KB
Address.class 5KB
Join.class 5KB
MapSortUtil.class 5KB
Msg.class 4KB
User.class 4KB
UserCollection.class 4KB
Announce.class 4KB
Notice.class 4KB
UserController.class 4KB
IntegralController.class 4KB
UploadImage.class 4KB
ChatController.class 4KB
WsController.class 4KB
AnnounceController.class 4KB
TypeController.class 4KB
AddressController.class 3KB
NoticeController.class 3KB
ShopController.class 3KB
Type.class 3KB
CommentController.class 3KB
MsgController.class 3KB
CollectionController.class 2KB
Integral.class 2KB
Starter.class 2KB
MyBatisPlusFillTime.class 1KB
CommoditySaleVo.class 1KB
WxShoppingApplication.class 937B
WebsocketConfiguration.class 715B
CollectionServiceImpl.class 660B
CommodityServiceImpl.class 649B
IntegralServiceImpl.class 642B
AnnounceServiceImpl.class 642B
DateUtil.class 638B
CommentServiceImpl.class 635B
AddressServiceImpl.class 635B
NoticeServiceImpl.class 628B
OrderServiceImpl.class 621B
TypeServiceImpl.class 614B
ChatServiceImpl.class 614B
ShopServiceImpl.class 614B
JoinServiceImpl.class 614B
UserServiceImpl.class 612B
MsgServiceImpl.class 607B
GetUUID.class 606B
CollectionMapper.class 384B
CommodityMapper.class 377B
AnnounceMapper.class 374B
IntegralMapper.class 374B
AddressMapper.class 371B
CommentMapper.class 371B
OrderMapper.class 365B
TypeMapper.class 362B
ShopMapper.class 362B
JoinMapper.class 362B
ChatMapper.class 362B
UserMapper.class 362B
MsgMapper.class 359B
ICollectionService.class 311B
ICommodityService.class 304B
IAnnounceService.class 301B
IIntegralService.class 301B
IAddressService.class 298B
ICommentService.class 298B
INoticeService.class 295B
IOrderService.class 292B
ITypeService.class 289B
IShopService.class 289B
IChatService.class 289B
IJoinService.class 289B
UserService.class 287B
IMsgService.class 286B
NoticeMapper.class 282B
.env.development 540B
.env.development 540B
.editorconfig 243B
.editorconfig 243B
.eslintignore 34B
.eslintignore 34B
star.gif 1KB
.gitattributes 378B
.gitignore 574B
.gitignore 256B
.gitignore 248B
.gitignore 247B
.gitignore 190B
.gitignore 190B
index.html 620B
index.html 620B
example.html 222B
favicon.ico 66KB
favicon.ico 66KB
共 844 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
川河w
- 粉丝: 33
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功