@smt-lib/swanx

---

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