小程序状态管理

项目介绍

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

目前已支持以下功能。

• 数据驱动
• 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)
  },
})