npm install @rustle/mp-store
一个轻量级的微信小程序状态管理库，他将能够平滑的兼容以前的旧项目，并不会有很强的侵入性，所以你可以直接迁移过来。如果你的小程序没有引入 npm 包的功能，可以在这里下载，然后放到项目中去。
这是一个简单的的迁移 demo
// 只需要两行代码，你就可以使用 mp-store 了
// 如果不想使用，也不会对你原有的项目产生影响
import createStore from '@rustle/mp-store'
const store = createStore()
App({
// ...
})下面是一个完整的使用 demo，更具体的使用，可以看相关部分的具体介绍
- 创建
reducer
store.add('action', {
partialState: {
name: 'tao',
},
setter (state, payload) {
return { name: payload }
}
})- 在
Page和Component中使用
// mp-store 对 page 和 component 无差别对待
Page({
storeConfig: {
useState: store => ({
name: state => state.name
})
},
onLoad () {
this.data.global.name // tao
},
// 更改
change () {
this.store.dispatch('action', 'chentao')
this.data.global.name // chentao
},
})如果你使用了模块，则会稍微有一点不同，看下面的 demo
- 创建
reducer
// 定义全局的 state
store.add('global', {
partialState: {
age: 25,
},
})
// 模块
const action = 'action'
const reducer = {
partialState: {
name: 'tao',
},
setter (state, payload) {
return { name: payload }
},
}
store.addMoudle('user', {
[action]: reducer,
})- 在
Page和Component中使用
// useState 是一个数组，第一个参数为需要注入的 module
Page({
storeConfig: {
useState: store => ['user', {
name: module => module.name,
age: (module, rootState) => rootState.age
}]
},
onLoad () {
this.data.global.age // 25
this.data.global.name // tao
},
// 更改
change () {
this.store.dispatch('action', 'chentao')
this.data.global.name // chentao
},
})