@mijizhe-opensource/wxx v0.2.5

wxx - 微信小程序状态管理

遇到问题，请提交issues，或者加 QQ 群278574710 此库以后只维护bug修复，不再进一步开发，建议新项目使用以下新库：

• @mijizhe-opensource/well

• @mijizhe-opensource/store

新库将状态管理和视图强化解耦，方便项目灵活选用

简介

微信小程序开发，比较常见的问题是数据计算和跨页面数据更新，为此，状态管理应运而生。

• 简介
• 亮点
• 使用

亮点

• Typescript 开发（Javascript 亦可用）
• 轻量无依赖。
• 支持Page和Component跨页面跨组件数据同步。
• 支持数据计算computed。

使用

• store.Page(options)代替小程序原生页面创建函数Page(options)
• store.Component代替小程序原生组件创建函数Component(options)

例子

• 声明仓库

./store.js

import { State, Store } from "@mijizhe-opensource/wxx"
// 声明状态（可嵌套）
const state = new State({
  name: "foo",
  contact: new State({
    phone: "123456"
  })
})
// 声明仓库
const store = new Store(state)

export default store

• 页面调用

./pages/me/me.js

import store from "../../store"
store.Page({
  data: {
    age: 1
  },
  computed: {
    about(state) {
      return `
        Hello, 
        my name is ${state.name},
        I'm ${this.data.age} years old,
        and my phone number is ${state.contact.phone}
      `
    }
  },
  handlePhoneNumberInput(res) {
    store.state.contact.phone = res.detail.value
  },
  onLoad() {
    setInterval(
      () => this.setData({ age: this.data.age + 1 }),
      2000
    )
  }
})

./pages/me/me.wxml

<text>{{ about }}</text>
<input
  catch:input="handlePhoneNumberInput"
  placeholder="phone number"
  ></input>