Data Management

    For example, the life value in the game will not only be displayed on the top of the person’s head, but the characters in the game will also display different forms according to the number of life values. We bind the EVAX component to the game object to perform a certain data Monitor, if the data changes, you can manipulate the data or events on other components of the current game object.

    Eva.js does not rely heavily on EVAX to develop games, and can be used as needed.

    Install

    In Browser

    All data needs to be defined in advance, if it is not defined, it will not be monitored

    1. // Create Store
    2. const store = {
    3.   user: {
    4.     name:'Mingfei',
    5.     age: 18
    6.   },
    7.   items: [
    8.     {
    9.       id: 1,
    10.       name: '20191111'
    11.     }
    12.   ]
    13. }

    Initialize EVAX

    1. // Introduce the evax plugin
    2. import {EvaXSystem, EvaX} from '@eva/plugin-evax'
    4. // Create a game and pass it to the store
    5. const game = new Game({
    6.   autoStart: true, // optional
    7. })
    8. const store = {a: 1}
    9. const evaxSystem = new EvaXSystem({
    10.   store // Here pass the defined store
    11. })
    12. game.addSystem(evaxSystem)
    14. const evaxManager = new GameObject('evaxManager')
    15. evaxManager.addComponent(
    16.   new EvaX({
    18.       'store.a': () => {}
    19.     }
    20.   })
    21. )
    23. game.scene.addChild(evaxMangager)

    update data

    1. store.user.name ='Cailun'
    2. // or
    3. evaxSystem.store.user.name ='Cailun'

    evax.updateStore Update all values

    Tip: updateStore and forceUpdateStore will only trigger the change of the last layer of attributes.

    Full coverage mode updates, compare content changes, the changed content will trigger the update,

    1. const newStore = {
    2.   user: {
    3.     name:'Cailun',
    4.     age: 18
    5.   }
    6. }
    8. evaxSystem.emit('evax.updateStore', newStore)

    The above operation will trigger the update of store.user.name because the age has not changed

    1. const newStore = {
    2.   user: {
    3.     name:'Cailun',
    4.     age: 18
    5.   }
    6. }

    The above operation will trigger the store.user.name and store.user.age data change events, even if there is no change

    Events trigger

    Use the emit method to trigger an agreed event, the event don’t use evax. at the beginning

    Monitoring method:

    1. // Add evax component
    2. go.addComponent(
    3.   new EvaX({
    5.       popUp(arg1, arg2) {}
    6.     }
    7.   })
    8. )
    1. // Create an object, the text component uses the name in the store
    2. const go = new GameObject('go')
    3. const txt = go.addComponent(new Text({ text:'' }))
    1. Generally speaking, our business logic is written in the script component. When the EVAX component receives the time or data change, the method on the script component is called.
    2. Hang some components that need to be modified, such as Text, on the properties of the script component for subsequent operations.
    1. // Create a custom component and put the method in the custom component
    2. class AScriptComponent extends Component{
    3.   static componentName:'AScriptComponent',
    4.   start() {
    5.     this.txt = this.gameObject.getComponent('Text')
    6.     // Use evax in the component to bind the evax component first, get the evax object on the evax component, and perform event triggering and modification
    7.     const evax = this.gameObject.getComponent('EvaX')
    8.     this.evax = evax.evax
    9.   },
    10.   setName(store, oldStore) {
    11.     txt.text = store.user.name // Set new text content
    12.     setTimeout(()=>{
    13.       this.evax.emit('animationDown') // Notify that the modification is complete, and other components will take over the changes, not in this case
    14.       this.evax.store.age += 1 // other components will take over the changes, not in this case
    15.     }, 1000)
    16.   },
    17.   popUp(store) {
    18.     // Do event corresponding operations
    19.   }
    20. })
    22. const aScript = go.addComponent(new AScriptComponent)

    Create an evax component, write the event that needs to be bound, and call the event on the custom component