@smt-lib/swanx NPM

title: @smt-lib/swanx header: develop nav: extensions

sidebar: @smt-lib/swanx

smt-swanx

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

npm 引入 swanx

小程序种使用三方npm包方法，见npm使用说明

npm install @smt-lib/swanx

方法 createStore

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

属性名	类型	必填	说明
state	Object	是	数据状态
fields	Object/Array	是	需要同步到小程序`data`上的数据。当类型为`Object`时，可以自定义挂载到`data`上的属性名。`fields`支持制定对象中的子元素，例如: `'a.b'`
mutations	Object	否	`key`为`commit`时提交的事件名，`value`为执行的修改`store.state`状态的`function`，第一个参数为`state`，第二个参数为`commit`时传入的参数`payload`
actions	Object	否	与`mutation`类似，`key`为`dispatch`时提交的事件名，`value`为执行的事件`function`，第一个参数为`context`，`context`包含`commit`方法和`state`属性，第二个参数为`dispatch`传入的参数`payload`

返回值

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

subscribe参数说明

参数	类型	必填	默认值	说明
第一个参数	Array/Object	否	*	会变化的数据，默认`fields`中所有数据变化都会触发回调函数
第二个参数	Function	是		数据变化时的回调函数

getState参数说明

参数	类型	必填	默认值	说明
第一个参数	String	是		要获取数据的`key`，例如：`'a'` , `'a.b.c'`

commit参数说明

参数	类型	必填	默认值	说明
第一个参数	String	是		`mutation`方法名
第二个参数	Object/Array/String	否		传入`mutation`的参数

dispatch参数说明

参数	类型	必填	默认值	说明
第一个参数	String	是		`action`方法名
第二个参数	Object/Array/String	否		传入`action`的参数

方法 storeBinding

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

storeBinding参数说明：

参数	类型	必填	默认值	说明
第一个参数	Object	是		当前上下文
第二个参数	Object	是		创建后的`store`

返回值

类型	说明
Function	清空所有`storeBinding`

方法 connect

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

connect参数说明：

参数	类型	必填	默认值	说明
第一个参数	Object	是		页面或组件原型
第二个参数	Object	否		创建后的`store`，如果没填则默认使用当前组件的父页面的`store`

返回值

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

各部分代码示例

store示例

// store.js
import { createStore } from "@smt-lib/swanx";
export const store = createStore({
    state: {
        a: 1,
        b: {
            d: 4,
            e: 5
        },
        c: 3
    },
    fields: ['a', 'b.d'],
    mutations: {
        changeA(state, num) {
            state.a = num;
        },
        addD(state) {
            state.b.d++;
        }
    }
    actions: {
        changeA(context, num) {
            context.commit('changeA', num);
        },
        addD({commit}) {
            setTimeout(() => {
                commit('addD');
            }, 300);
        }
    }
});

// a页面
import { store } from "./store";
import { bindStore } from "@smt-lib/swanx";
Page({
    data: {},
    onLoad() {
        this.unbindStore = storeBinding(this, store);
        console.log(this.store);
    },

    myChangeA() {
        store.dispatch('changeA', 1);
    },

    myAddD() {
        store.commit('addD');
    }

    unOnload() {
        this.unbindStore();
    }
});


// a页面的b组件
import { connect } from "@smt-lib/swanx";
const newComponent = connect(Component);
newComponent({
    properties: {},
    pageLifetimes: {
        attached() {
            console.log(this.data.a);
            store.subscribe(['b.d'], state => {
                console.log(state.b);
            });
        }
    },
    method: {
        myChangeA() {
            this.store.dispatch('changeA', 1);
        },

        myAddD() {
            this.store.commit('addD');
        }
    }
});

@infinitebrahmanuniverse/nolb-_smt @everything-registry/sub-chunk-846 swan-example @zalastax/nolb-_smt baidu2weixin

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago