vue-api-measurements v0.2.3

Vue 3 API measurements

<template>
  <div>
    <button @click="flagApi.toggle">toggle</button>
  </div>
  <div v-if="flag">
    <button @click="add">add</button>
    <button @click="reset">reset</button>
    <ul>
      <li v-for="(item, index) of items" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { useFlag, useState } from "vue-api-measurements";
  // or
  import { useFlag } from "vue-api-measurements/use-flag";
  import { useState } from "vue-api-measurements/use-state";

  const [flag, flagApi] = useFlag(true);
  const [items, { dispatch, reset }] = useState<Array<{ name: string }>>([]);

  const add = () => dispatch([...items.value, { name: "item" }]);
</script>

Install

yarn add vue-api-measurements

or

npm install vue-api-measurements

Methods

useState

Dedicated state value. useState\<T> gives two parameters:

• initValue: T: default undefined.
• mapFn(current: T, next: T) => T: default (current, next) => next

Returns state and stateApi.

• stateApi.dispatch(value)
  value will be passed to mapFn as the second argument next

type Note = {
  id: number,
  title: string,
  content: string
}

function createNote() {
  // ... create Note here
}

const [notes, {dispatch, reset}] = useState<Array<Note[]>([]);
const add = () => dispatch([...notes.value, createNote()]);

• stateApi.reset()
  reset state to initValue

• stateApi.trigger()
  call mapFn where current and next arguments is equal

const trigger = () => {
  value.value = mapValue(value.value, value.value);
};

useFlag

On-off switcher. useFlag gives one boolean parameter initValue (default false).

Returns flag and flagApi.

// flag is false now
const [flag, flagApi] = useFlag()

// set true
flagApi.setTrue();

// set false
flagApi.setFalse();

// set manually true (or false)
flagApi.set(true);

// inverse flag
flagApi.toggle();

// reset to inital value
flagApi.reset();