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');
        }
    }
});