1.0.2 • Published 2 years ago
mina-reactivity v1.0.2
项目介绍
小程序状态管理解决方案。
目前已支持以下功能。
- 数据驱动
- mixins(混入)
- 状态管理(全局 store)
- effect(副作用)
安装
1. NPM 安装
npm i mina-reactivity --save
安装完成后,使用小程序开发工具构建 NPM 即可。
2. 复制文件
下载源码后,将 reactivity/dist 中文件复制到自己的项目中即可。
使用案例
1. 数据驱动
const { createPage, reactive } = require('mina-reactivity');
const student = reactive({
name: '张三'
});
createPage()({
$data: () => {
return {
name: student.name
}
},
onLoad: function () {
setTimeout(() => {
student.name = '李四';
}, 3 * 1000)
},
})
2. mixins
const { createPage, reactive } = require('mina-reactivity');
const student = reactive({
name: '张三'
});
const commonMixin = {
data: () => {
return {
name: student.name
}
},
methods: {
test () {
console.log('test.');
}
}
}
createPage()({
mixins: [
commonMixin
],
onLoad: function () {
this.test();
setTimeout(() => {
student.name = '李四';
}, 3 * 1000)
},
})
3. 状态管理
1. 创建store
import { Store } from 'mina-reactivity';
export default new Store({
state: {
student: {
name: '张三'
},
count: 0
},
mutations: {
changeState: (state, data) => {
Object.keys(data).forEach(key => (state[key] = data[key]));
}
}
});
2. 全局注册 store(app.js)
import store from './store/index';
App({
$store: store
})
3. 页面使用
const { createPage } = require('mina-reactivity');
createPage()({
$data: (ctx) => {
const state = ctx.$store.state;
return {
student: state.student,
count: state.count
}
},
onLoad: function () {
let timer = setInterval(() => {
const count = this.data.count;
if (count === 10) {
return clearInterval(timer)
};
this.$store.commit('changeState', {
count: count + 1
})
}, 1 * 1000);
setTimeout(() => {
this.$store.commit('changeState', {
student: {
name: '李四'
}
});
}, 3 * 1000)
},
})
4. 副作用函数
const { createPage, reactive, effect } = require('mina-reactivity');
const student = reactive({
name: '张三'
});
createPage()({
$data: () => {
return {
name: student.name
}
},
onLoad: function () {
effect(() => {
console.log('effect:', student.name);
});
setTimeout(() => {
student.name = '李四';
}, 5 * 1000)
},
})