mp-store

npm install @rustle/mp-store

一个轻量级的微信小程序状态管理库，他将能够平滑的兼容以前的旧项目，并不会有很强的侵入性，所以你可以直接迁移过来。如果你的小程序没有引入 npm 包的功能，可以在这里下载，然后放到项目中去。

更新日志

Usage

这是一个简单的的迁移 demo

// 只需要两行代码，你就可以使用 mp-store 了
// 如果不想使用，也不会对你原有的项目产生影响
import createStore from '@rustle/mp-store'
const store = createStore()

App({
  // ...
})

下面是一个完整的使用 demo，更具体的使用，可以看相关部分的具体介绍

1. 创建 reducer

store.add('action', {
  partialState: {
    name: 'tao',
  },
  setter (state, payload) {
    return { name: payload }
  }
})

2. 在 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

1. 创建 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,
})

2. 在 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
  },
})

store 的介绍

storeConfig 的介绍

module 的介绍

middleware 的介绍

time travel 的介绍

mixin 的介绍

hooks 的介绍

data diff 的原理