Skip to main content

Introduction

GitHub Licensenpm versionnpm minified sizenpm total downloads

🔥warning

WIP Documentation!

The vue package works fine and does not show any problems yet. However, it has not yet been tested extensively and isn't typesafe (Typescript).

If you find a bug, please file a github issue, and we will fix it as soon as possible.

Integration for Vue

❓ vue​

The vue package helps us to integrate AgileTs into a Vue environment and serves as an Interface to Vue. Its main task is to bind States to Vue Components. This binding ensures that AgileTs rerender the Component whenever a bound State mutates. It also offers some other valuable functionalities that optimize the workflow using AgileTs in a Vue project.

bindAgileInstances()​

The bindAgileInstances() method binds/subscribes States to Vue Components. This binding ensures that the Component rerenders whenever a bound State mutates. We can flexibly bind any State to any Vue Component.

export default {
    name: 'MyComponent',
    data: function () {
        return {
            ...this.bindAgileInstances({
                myState: MY_STATE,
            }),
        };
    },
};

bindAgileInstances() returns a State value keymap based on the passed States. We merge the returned keymap into the data object to access the State values in the html code like we would local Vue States.

<template>
  <div id="app">
    <p>myState: {{ sharedState.myState }}</p>
  </div>
</template>

Note that the AgileTs State values are under the sharedState property located to separate them from the local Vue States.

const MY_STATE = createState('jeff');
const MY_STATE_2 = createState('frank');

this.bindAgileInstances({
  myState: MY_STATE,
  myState2: MY_STATE_2,
}); // Returns '{myState: 'jeff', mayState2: 'frank'}'

Instead of a States keymap we can also pass an array of States. But keep in mind that then the passed States require a unique key to be properly mapped into the returned State value keymap.

const MY_STATE = createState('jeff', {key: 'myState'});
const MY_STATE_2 = createState('frank');

this.bindAgileInstances([
  MY_STATE,
  MY_STATE_2,
]); // Returns '{myState: 'jeff'}'

Passed States without a valid key are ignored and won't be represented by the returned keymap. Thus, the State value isn't accessible in the html code, and a State mutation rerender is triggered via. vueComponent.forceRerender() instead of mutating the data object.

🟦 Typescript​

The Vue Integration isn't typesafe yet. But we are working on it.

🚀 Quick Links​