/mp-store

轻量级的小程序状态管理库

Primary LanguageJavaScriptMIT LicenseMIT

mp-store

Build status Coverage NPM version QQ group

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 }
  }
})
  1. PageComponent 中使用
// 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,
})
  1. PageComponent 中使用
// 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
  },
})