关于前端:下一代vue状态管理Vanx

摈弃简单,心智累赘极重的Vuex, Flux, Redux等等等等之类的货色吧。
单纯的面向对象,曾经足以治理状态了,而且更好。
更少的心智累赘,更简略的公共接口。一眼就能看明确。
用法:
上面是一个小Demo
创立一个Class,这个Class须要继承Vanx类
领有两个办法plus和minus,和一个状态:result
调用plus或者minus就会对result加1或者减1

import Vanx from 'vanx';

class Calcutor extends Vanx {
  protected result = 0;
  public plus() {
    this.result++;
  }
  public minus() {
    this.result--;
  }
}
// 实例化并导出状态治理类
export const calcutor = new Calcutor();

而后在Vue文件里

import { Component, Prop, Vue } from 'vue-property-decorator';
import { calcutor, powerfulCalcutor } from './store';

@Component
export default class HelloWorld extends Vue {
  // 应用刚刚到处的累的一个办法叫decorator,参数是你想注入到Vue里的状态的变量名
  @calcutor.decorator('result')
  private calcutorResule!: number;
  private plus() {
   // 而后调用状态治理类的办法,
   // vanx会告诉vue去更新Dom
    calcutor.plus();
  }
  private minus() {
    calcutor.minus();
  }
}

想用着试试看的能够间接

npm install vanx

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理