miniprogram-global-state

小程序全局状态管理库

Usage

TODO

Options

TODO

Development

LICENSE

MIT

<!--logs.wxml-->
<wxs module="tojson">
  function tojson(value) { return JSON.stringify(value) }; module.exports =
  tojson;
</wxs>
<view style="display: flex;">
  <button bind:tap="count_decrement">-</button>
  <button>{{count.plusOne}}</button>
  <button bind:tap="count_increment">+</button>
</view>

<view style="margin-top: 20px;">{{tojson(count)}}</view>

<button style="margin-top: 20px;" bind:tap="cancel">
  cancel (取消请求渲染)
</button>
<button bind:tap="runAsync">runAysnc (返回promise的请求)</button>
<button bind:tap="mutate">mutate (修改data)</button>
<button bind:tap="refresh">refresh (刷新)</button>
<button bind:tap="run">run (发送请求)</button>
<view style="margin-top: 20px;" wx:if="{{todoRequest.loading}}"> 加载中 </view>
<view wx:elif="{{todoRequest.error}}"> 出错了 {{todoRequest.error}} </view>
<view wx:else> {{tojson(todoRequest.data)}} </view>

<view style="margin-top: 20px;"> {{tojson(todoRequest)}} </view>

//count.js

import Store from 'miniprogram-global-state';

//声明状态
export class Count extends Store {
  data = {
    count: 0,

    //计算属性plusOne get
    get plusOne() {
      return this.count + 1;
    },

    // 计算属性plusOne set
    set plusOne(val) {
      this.count = val;
    },
  };

  decrement = () => {
    this.data.count -= 1;
  };

  increment = () => {
    this.data.count += 1;
  };
}

//作为全局变量使用
export const countStore = new Count();

import { Count } from './count'; //作为局部状态使用
import { countStore } from './count'; //作为全局状态使用
import { useRequest, ComponentWithComposition } from 'miniprogram-global-state';

type info = {
  user: {
    name: string;
    password: string;
  };
};

export type Parmas = {
  password: string;
};

//模拟promise发送的请求
const server = (params: Parmas) => {
  return new Promise<info>((resolve, reject) => {
    setTimeout(() => {
      Math.random() * 100 > 40
        ? resolve({
            user: {
              name: 'jack',
              password: params.password,
            },
          })
        : reject('数据获取错误');
    }, 2000);
  });
};

//重写的微信小程序组件方法支持setup选项带有typescript类型提示
ComponentWithComposition({
  setup() {
    //注入带key名前缀的状态和状态相关的方法
    return {
      count: new Count(), //作为当前的局部状态使用
      countStore, //作为全局状态使用
      todoRequest: useRequest(server, {
        manual: false, //是否手动执行
        debounceWait: 300, //防抖时间
        // throttleWait:1000 , //节流时间
        retryCount: 3, //错误重试次数
        // retryInterval: 2000, //错误重试时间间隔,
        onFinally() {
          console.log('onFinally 错误和成功时都执行');
        },
        onSuccess(data) {
          console.log('onSuccess 成功时执行', data);
        },
        onError(error) {
          console.error('onError 错误', error);
        },
      }),
    };
  },
  lifetimes: {
    attached() {},
  },
  methods: {
    runAsync() {
      // todoRequest_runAsync 返回promise实例的run方法
      this.todoRequest_runAsync({
        password: Math.random().toString(3).slice(4, 10),
      })
        .then((data) => {
          console.log('runAsync then ', data);
        })
        .catch((error) => {
          console.log('runAsync  catch', error);
        })
        .finally(() => {
          console.log('runAsync findally');
        });
    },
    refresh() {
      //重新刷新本次请求
      this.todoRequest_refresh();
    },
    cancel() {
      //取消请求的渲染结果
      this.todoRequest_cancel();
    },
    mutate() {
      //修改请求返回的data状态
      this.todoRequest_mutate({
        user: {
          password: 'hello world',
          name: 'mary',
        },
      });
    },
    run() {
      this.todoRequest_run({
        password: Math.random().toString(3).slice(4, 10),
      });
    },
  },
});

//通用写法 支持微信/支付宝/钉钉/百度/字节/抖音/QQ/京东等小程序使用

import { countStore, Count } from './count';

Component({
  lifetimes: {
    attached() {
      //作为本组件状态使用
      this.count = new Count();
      this.count.bind(this, 'count'); //初始化绑定状态

      //作为全局状态使用
      countStore.bind(this, 'count2'); //初始化绑定状态
    },
    detached() {
      this.count.unbind(this); //卸载后解绑状态
      countStore.unbind(this);
    },
  },
  methods: {
    countIncrment() {
      this.count.increment();
    },
    count2Incrment: countStore.increment,
  },
});