评论

小程序状态管理解决方案

小程序状态管理解决方案。

项目介绍

小程序响应式开发解决方案。

目前已支持以下功能。

  • 数据驱动
  • mixins(混入)
  • 状态管理(全局 store)
  • effect(副作用)

源码地址

安装

1. NPM 安装

npm i @minipro/reactivity --save

安装完成后,使用小程序开发工具构建 NPM 即可。

2. 复制文件

下载源码后,将 reactivity/dist 中文件复制到自己的项目中即可。

使用案例

1. 数据驱动

const { createPage, reactive } = require('@minipro/reactivity');

const student = reactive({
  name: '张三'
});

createPage()({
  $data: () => {
    return {
      name: student.name
    }
  },

  onLoad: function () {
    setTimeout(() => {
      student.name = '李四';
    }, 3 * 1000)
  },
})

代码片段

2. mixins

const { createPage, reactive } = require('@minipro/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 '@minipro/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('@minipro/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('@minipro/reactivity');

const student = reactive({
  name: '张三'
});

createPage()({
  $data: () => {
    return {
      name: student.name
    }
  },

  onLoad: function () {
    effect(() => {
      console.log('effect:', student.name);
    });

    setTimeout(() => {
      student.name = '李四';
    }, 5 * 1000)
  },
})

代码片段

总结

开源不易,且用且珍惜。

最后一次编辑于  18小时前  
点赞 0
收藏
评论

3 个评论

登录 后发表内容