Skip to content

Usage ​

The API documentation documents all of the methods available on a Harness-Vue Pinia page store. For the purposes of documentation, all methods are available as part of a pageStore module. Depending on how you are accessing a Harness-Vue store (in a component with composition or options APIs, in a loadData function, elsewhere in plain javascript), this may be made available to you differently. See examples below, and refer to the documentation on automagic page stores for more information on how to include Harness-Vue in your components.

Components ​

Composition API ​

vue
<template>
  <div>
    {{ harness.getChartData(chart.key) }}
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useHarnessComposable } from "@rtidatascience/harness-vue";
defineProps({
  chart: {
    type: Object,
    required: true,
  },
});
const harness = useHarnessComposable();
harness.loadData() // functions available on the harness-vue instance
</script>

Options API ​

vue
<template>
  <div>
    {{ getChartData('chartKey') }}
  </div>
</template>
<script>
  export default {
    name: 'chart',
    mounted() {
        this.loadData() // functions available on the vue instance
    }
  }
</script>

Outside of Components ​

loadData function ​

javascript
export default async function loadData(pageDefinition, pageStore) { 
    const filterValue = pageStore.getFilter('filterKey'); // functions available on the pageStore instance
}