6
Currently, only Vue written in Class is supported, because decorators can be used.
This is a new state management library, which comes from a new idea. source code address

The front-end industry likes to make simple things complicated.
Things that can already be achieved with native code. It is necessary to make some complicated, big and inappropriate things for the current Internet celebrities.

Now let us abandon the complex and mentally burdened Vuex, Flux, Redux, etc. etc.
Pure object orientation is enough to manage state, and it's better.
Less mental burden, simpler public interface. You can see it at a glance.

usage

Below is a small Demo
Create a Class, this Class needs to inherit the Vanx class
Has two methods plus and minus, and a status: result
Calling plus or minus will add 1 or subtract 1 to the result

import Vanx from 'vanx';

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

Then in the Vue file

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

@Component
export default class HelloWorld extends Vue {
  // 使用刚刚导出的类的一个方法叫decorator,参数是你想注入到Vue里的状态的变量名
  @calcutor.decorator('result')
  private calcutorResult!: number;
  private plus() {
   // 然后调用状态管理类的方法,
   // vanx会通知vue去更新Dom
    calcutor.plus();
  }
  private minus() {
    calcutor.minus();
  }
}

If you want to try it, you can directly

npm install --save vanx

OLong
450 声望318 粉丝