零侵入,移植和移除都极其方便的一款原生小程序同步状态库。 类 react-redux api 风格。
-
1.2.0 新增 diff 比对,优化性能
-
1.1.0 新增组件连接器(connectComponent) 代码优化
npm 使用此库需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
npm install --save miniprogram-sync-state
小程序开发者工具 -> 详情 -> 使用 npm 模块
小程序开发者工具 -> 工具 -> 构建 npm
const { createStore } = require('miniprogram-sync-state')
复制 node_modules/miniprogram-sync-state 项目(或自行 clone github 项目 npm run build 生成)下的小程序生成文件 miniprogram_dist/index.js 置于项目文件夹内引用
const { createStore } = require('../../libs/miniprogram-sync-state/index.js')
const { createStore, connect, connectComponent, setState } = require('miniprogram-sync-state')
/**
* connect
* @param {Function} mapStateToData
* @param {Function} mapMethodToPage
* @return {Function}
*/
/**
* connectComponent
* @param {Function} mapStateToData
* @param {Function} mapMethodToPage
* @return {Function}
*/
/**
* createStore
* @param {Object} state
* @return {Object}
*/
/**
* setState
* @param {Object | Function} state
*/
// app.js
const initStore = {
hasLogin: false,
userName: ''
}
const { createStore } = require('miniprogram-sync-state')
const Store = createStore(initStore)
App({
onLaunch() {},
Store
})
// pages/login/index.js
let app = getApp()
const { connect } = app.Store
const LoginPage = {
onReady(e) {},
onShow() {},
bindUserNameChange(e) {
this.setData({
username: e.detail.value
})
},
bindLogin() {
if (!this.data.username) return
this.login(this.data.username)
wx.navigateBack({
delta: 1
})
}
}
const ConnectPage = connect(
({ hasLogin, userName }) => {
return {
hasLogin,
userName
}
},
(setState, state) => ({
login(userName) {
setState({
hasLogin: true,
userName
})
}
})
)(LoginPage)
Page(ConnectPage)
更具体使用可查看demo
禁止在任何能获取到state实例
的地方直接修改state
,以免造成未知错误(这一点同react
),虽然可以在状态库中做深拷贝避免此隐患,但是需要考虑性能问题以及是否必要,最终决定采用规范的方式做限制。
// 🚫 以下为禁止示例
const ConnectPage = connect(state => {
state.userInfo.userName = 'err use'
return {
userInfo: state.userInfo
}
})(Page)