Vuet

The index

What is Vuet.js?

The only way to update the state in VUEX is through mutation, which is trivial, whereas in Vuet it is pleasant to update directly when and where assignment is allowed. Vuet is a centralized state management mode, which provides a module system and a rule system. It exists for the purpose of making state management easy

The installation

npm install vuet@latestCopy the code

API

Instance properties

vuet.app

  • Description:new Vuet({ vuet })At the time of theVueThe instance
  • Default value:null

vuet.modules

  • Description: Added modules, all here
  • Default value:{}

vuet.options

  • Description:new Vuet(options)Parameters passed in when instantiated
  • Default value:{ pathJoin: '/', modules: {} }

vuet.store

  • Description: The state stored by each module
  • Default value:{}

vuet.vm

  • Description: Vue instance inside vuET

Global API

Vuet.mapmodules (opts: {alias: 'module path'})

  • Description: Connect modules in Vue components so that methods and states of modules can be used in components

Vuet.maprules (opts: {rule: [{path: 'module path}]})

  • Description: Use the corresponding rules to update the module. Supported abbreviations:{rule: 'module path'},{rule: [' module path ']}

Vuet.rule(name: string, opts: Object)

  • Description: Register global rules. For details, see the following custom rules

What is a module?

Module is like the basic skeleton of a person, the attributes of the module are like the hands, feet, eyes and so on, and the method of the module is like the brain, which controls the behavior of people, such as the code by hand, walking with feet, when seeing beautiful women blink

Connect modules using compute properties

{
  computed: {
    test () { //While it is possible to inject modules into components using the mapModules method, it is also possible to obtain modules by evaluating properties
      return this.$vuet.getModule('The module path')}},beforeCreate () {
    //This. test gets the module and can call its methods and properties
    //This.$vuet gets the instance of the vuet and can play happily}}Copy the code

Resetting module status

const vuet = new Vuet(a)vuet.addModules('test', {
  data () {
    return {
      count: 0}},plus () {
    this.count = 100 //As this. The state. The count
    setTimeout(() = > {
      this.reset(a)//This is a vuet built-in reset method equivalent to this.state = this.data().
    }, 2000)}})Copy the code

What are the rules?

In Vuet, rules are a special presence in Vuet that allows you to abstract away the similar process of updating the state of a module. You can use rules to update any module. You can think of a Vuet module as a car, and the rules define how the car should go, should it go straight, should it turn, should it go straight for a while, and then turn, all defined by rules

Custom rules

The main principle is to get the module path passed in, and return a mixin injected into the component. We are now trying to define a drag process that calls the fetch method of the module every time the component executes the beforeCreate hook. We are now trying to define a myRule

Vuet.rule('myRule', { //Note: Registration of rules must precede execution of all components
  install (Vuet.Vue) {
    //Pass in a Vuet and Vue constructor. It will only be called once
  },
  init (vuet) {
    //After new Vuet() is instantiated, the instance is passed in, where you can add modules, methods and so on. Each new Vuet instance executes a hook
  },
  addModule (vuet.path) {
    //New Vuet().addModules Each time a module is registered, the hook is executed
  }
  rule ({ path }) {
    //Pass in the path to the current module and return a mixin to inject into the component. Called when Vuet's mapRules method is executed
    return {
      beforeCreate () {
        //Get the current module with the path
        const vtm = this.$vuet.getModule(path)
        //The fetch method of the module is then called once
        vtm.fetch()}}},destroy (vuet) {
    //Pass in the vuET instance you are currently destroying, and you can do something with it yourself}})Copy the code

Inject rules to update modules into components

  {
    mixins: [
      mapRules({
        'myRule': 'Updated module path'})]//. options
  }Copy the code

Third Party projects

  • Vue-cnode Cnode community implemented by VUE + Vuet