westore

基于发布订阅简单实现的状态管理，支持多模块，计算属性。

小程序状态管理

• API简单
• 压缩后仅有1kb, 无其它依赖
• 可按模块划分

快速入门

1.安装npm install --save @7pound/westore

2.构建npm，在微信开发工具中 菜单 - 工具 - 构建npm

3.定义store

通过class WeStore

import WeStore from '@7pound/westore'

const fetchUserScore = () => new Promise((resolve) => {
  setTimeout(() => {
    const score = Math.floor(Math.random() * 101)
    resolve({code: 0, message: 'ok', data: {score}})
  }, 500)
})
class UserStore extends WeStore {
  data = {
    name: 'xigua',
    age: 10,
    score: 0,
    say() {
      // the this is UserStore instance
      return this.data.name + ' say: my score is ' + this.data.score + '!'
    }
  }

  getUserScore = async () => {
    const res = await fetchUserScore()
    this.data.score = res.data.score
    this.update()
  }

  setName = (name) => {
    this.data.name = name
    this.update()
  }
}

const userStore = new UserStore()

export default userStore

通过defineStore

import { defineStore } from '@7pound/westore'

const fetchUserScore = () => new Promise((resolve) => {
  setTimeout(() => {
    const score = Math.floor(Math.random() * 101)
    resolve({code: 0, message: 'ok', data: {score}})
  }, 500)
})
const userStore = defineStore({
  state: {
    name: 'xigua',
    age: 10,
    score: 0,
    
  },
  getters: {
    say(state) {
      return state.name + ' say: my score is ' + state.score + '!'
    }
  },
  actions: {
    getUserScore: async () => {
      const res = await fetchUserScore()
      this.data.score = res.data.score
      this.update()
    }
  
    setName: (name) => {
      this.data.name = name
      this.update()
    }
  }
}

export default userStore

4.使用

在page中使用

Page({
  data: {

  },
  onLoad() {
    userStore.bind(this, '$user')
  },
  onUnload() {
    userStore.unBing(this)
  },

  handleSetName() {
    const name = userStore.data.name.split('').reverse().join('')
    userStore.setName(name)
  },
  handleNavMine() {
    wx.navigateTo({url: '/pages/mine/mine'})
  }
})

<view class="container">
    <!-- <view class="page-card">
      <UserInfo />
    </view> -->

    <view class="p">
      <text>userStore.name: </text>
      <text>{{ $user.name }}</text>
    </view>

    <button type="primary" bindtap="handleSetName" class="btn">更新name</button>
    <button type="primary" bindtap="handleNavMine" class="btn">跳转个人中心页</button>
</view>

在Component中使用

Component({
  lifetimes: {
    ready() {
      userStore.bind(this, '$user')
    },
    detached() {
      userStore.unBind(this)
    }
  },
  methods: {
    handleGetScore() {
      wx.showLoading({title: '加载中'})
      userStore.getUserScore().then(() => {
        wx.hideLoading()
      }).catch(() => {})
    }
  }
})

<view class="contaienr">

  <view class="title">UserInfo组件</view>
  <view class="p">
    <text>userStore.name: </text>
    <text>{{ $user.name }}</text>
  </view>
   <view class="p">
    <text>userStore.score: </text>
    <text>{{ $user.score }}</text>
  </view>
  <view class="p">
    <text>userStore.say: </text>
    <text>{{ $user.say }}</text>
  </view>

  <button class="btn" type="primary" size="mini" bindtap="handleGetScore" >更新score</button>
</view>

DEMO示例

1.下载仓库 git clone https://github.com/7pou/westore.git

2.安装依赖npm install or yarn

3.执行编译npm run dev or yarn dev

4.导入项目

打开微信开发工具，导入项目、目录在 /miniprogram_dev

5.编译小程序

API说明

store.data

store中元数据

store.bind(instance, store_name)

在页面中加载（onLoad）、组件挂载（lifetimes.ready）中调用。

绑定store到 page 或 component 的data 中，data中的键值为store_name

参数	说明	必填
instance	page实例 or component实例	是
store_name	绑定到page实例 or component实例上data的名称	是

store.unBind(instance)

在页面卸载（onUnload）、组件销毁（lifetimes.detached）调用。

取消页面或组件中store绑定

参数	说明	必填
instance	page实例 or component实例	是

store.update()

更新store的值到页面或组件的 data 中（修改store.data 后调用）

store.on(func)

设置当前store中data发生变化的监听函数

参数	说明	必填
func	data改变的监听函数	是

store.off(func)

取消设置当前store中data发生变化的监听函数

参数	说明	必填
func	data改变的监听函数	是

基于小程序npm模板 开发

架构实现参考Tencent/westore

下期计划

• 加入diff算法，优化update方法中setData一把梭的性能问题
• 加入action log
• 支持class 和 defineStore() 两种store定义方法