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

48次阅读

共计 738 个字符，预计需要花费 2 分钟才能阅读完成。

摈弃简单，心智累赘极重的 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();
  }
}

想用着试试看的能够间接