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
}