swanx

解释： 在小程序开发中，总会遇到多页面需要使用同一数据的情况，swanx是个轻量级数据管理工具，可以帮助开发者解决数据监听，多页面共用数据，子组件轻松获得父组件数据等功能。小程序中使用三方npm包方法，见npm使用说明。

方法参数

createStore方法参数说明：

创建store，可多页面共用一个，也可以每个页面独立使用自己的store。

参数类型必填默认值说明
stateObject是数据状态
fieldsObject/Array是需要同步到小程序data上的数据。当类型为Object时，可以自定义挂载到data上的属性名。fields支持制定对象中的子元素，例如: 'a.b'
actionsObject/Array否修改store状态的动作，当类型为Object时，可以自定义挂载到storeManager上的方法名

返回值

返回storeManger对象，storeManger对象包括以下方法

名称类型说明
subscribeFunction订阅方法
getStateFunction获取state值
dispatchFunction更改store上数据状态，并触发有依赖的监听函数
unsubscribeAllFunction清空所有订阅，无参数传入

storeManger对象的subscribe方法参数

名称类型说明
fieldsObject/Array会变化的数据，默认fields中所有数据变化都会触发回调函数
callbackFunction数据变化时的回调函数

storeManger对象的getState方法参数

名称类型说明
keystring要获取数据的key，例如：'a' , 'a.b.c'

storeManger对象的dispatch方法参数

名称类型说明
actionNamestringaction方法名
dataObject/Array/String需要更新的数据

storeBinding方法参数说明

在onLoad或者attached时，将创建的store和当前上下文绑定

名称类型说明
targetObject当前上下文
storeObject创建后的store

返回值

类型说明
Function清空所有storeBinding

connect方法参数说明

使用connect装饰过的组件或者页面，可以更方便的使用父级的store，避免逐层传递公用数据。

名称类型说明
constructorObject页面或组件原型
storeObject创建后的store，如果没填则默认使用当前组件的父页面的store

返回值

类型说明
Function装饰后的组件或页面原型

代码示例

在开发者工具中预览效果

扫码体验

swanx - 图1请使用百度APP扫码

图片示例

swanx - 图2

swanx - 图3

swanx - 图4

安装

  1.     npm install @smt-lib/swanx

代码示例1

  1.     // store.js
  2.     import {createStore} from '@smt-lib/swanx';
  3.     export const store = createStore({
  4.         state: {
  5.             a: 0
  6.         },
  7.         fields: ['a'],
  8.         actions: {
  9.             changeA(num) {
  10.                 return {
  11.                     ...this.state,
  12.                     a: this.state.a + num
  13.                 };
  14.             }
  15.         }
  16.     });
  18.     // a页面
  19.     import { store } from "./store";
  20.     import { storeBinding } from "@smt-lib/swanx";
  21.     Page({
  22.         data: {
  23.             a: 0
  24.         },
  26.         storeBind() {
  27.             this.unbindStore = storeBinding(this, store);
  28.             swan.showToast({
  29.                 title: '已绑定',
  30.                 icon: 'none'
  31.             });
  32.         },
  34.         myChangeA() {
  35.             store.dispatch('changeA', 1);
  36.             swan.showModal({
  37.                 title: 'swanx',
  38.                 content: 'data.a=' + this.data.a,
  39.                 confirmText: '确定',
  40.                 showCancel: false
  41.             });
  42.         },
  44.         destory() {
  45.             if (this.unbindStore) {
  46.                 this.unbindStore();
  47.                 swan.showToast({
  48.                     title: '已取消绑定',
  49.                     icon: 'none'
  50.                 });
  51.             } else {
  52.                 swan.showModal({
  53.                     title: 'swanx',
  54.                     content: '请先绑定store',
  55.                     confirmText: '确定',
  56.                     showCancel: false
  57.                 });
  58.             }
  59.         },
  61.         unOnload() {
  62.             this.unbindStore && this.unbindStore();
  63.         }
  64.     });

代码示例2

  1.     // store.js
  2.     import { createStore } from "@smt-lib/swanx";
  3.     export const store = createStore({
  4.         state: {
  5.             a: 1,
  6.             b: {
  7.                 d: 4,
  8.                 e: 5
  9.             },
  10.             c: 3
  11.         },
  12.         fields: ['a', 'b.d'],
  13.         actions: {
  14.             changeA(num) {
  15.                 return {
  16.                     ...this.state,
  17.                     a: this.state.a + num
  18.                 };
  19.             },
  20.             addD() {
  21.                 return {
  22.                     ...this.state,
  23.                     b: {
  24.                         ...this.state.b,
  25.                         d: this.state.b.d + 1
  26.                     }
  27.                 };
  28.             }
  29.         }
  30.     });
  32.     // a页面
  33.     import { store } from "./store";
  34.     import { storeBinding } from "@smt-lib/swanx";
  35.     Page({
  36.         data: {},
  37.         onLoad() {
  38.             this.unbindStore = storeBinding(this, store);
  39.             console.log(this.store);
  40.         },
  42.         myChangeA() {
  43.             store.dispatch('changeA', 1);
  44.         },
  46.         unOnload() {
  47.             this.unbindStore();
  48.         }
  49.     });
  52.     // a页面的b组件
  53.     import { connect } from "@smt-lib/swanx";
  54.     const newComponent = connect(Component);
  55.     newComponent({
  56.         properties: {},
  57.         pageLifetimes: {
  58.             attached() {
  59.                 console.log(this.data.a);
  60.                 store.subscribe(['b.d'], state => {
  61.                     console.log(state.b);
  62.                 });
  63.             }
  64.         },
  65.         method: {
  66.             myChangeA() {
  67.                 this.store.dispatch('changeA', 1);
  68.             }
  69.         }
  70.     });