# Variables

Visualia allows to use a both global (shared between pages)and local (page-specific) variables. They cater to different use cases: global variables simpler to set up and can be shared between pages; local variables use longer syntax but allow more fine control over them.

# Global variables

# Setting and getting a global variable

Let's use a button to set a global variable v.x:

<button v-on:click="v.x = 100">Set v.x to 100</button>

> v.x is: {{ v.x }}

Set v.x to 100

v.x is: 0

# Getting a global variable with a default value

When global variable is not yet set, it's value is undefined:

> v.y value is {{ v.y }}
> v.y type is {{ typeof v.y }}

v.y value is 0
v.y type is number

In some cases, you need to have a global value available before it is set. Your can use ?? operator to provide a default value:

> v.y is {{ v.y ?? 0 }}

v.y is 0

Let's use a button to set v.y to see how the values above change:

<button v-on:click="v.y = 200">Set v.y to 200</button>

Set v.y to 200

Set v.y to undefined

# Getting all global variables

To get all global variables, you need just to output a v value:

> {{ v }}

{ "r": 50, "x": 0, "a": 0, "x2": 0, "x3": 0, "count": 6, "startAngle": 0, "endAngle": 180, "innerRadius": 25, "outerRadius": 75, "cornerRadius": 0, "length": 1, "step": 20, "r2": 50, "y": 0, "angle": 0, "scaleX": 1, "scaleY": 1, "scewXAngle": 0, "skewYAngle": 0, "deg": 0, "rad": 0 }

# Global variables in custom components

You can also access global variables in your custom components by importing Visualia's global values object v:

<!-- /src/App.vue -->

<script setup>
import { watchEffect } from "vue";
import { v, VSlider } from "visualia";
watchEffect(() => console.log(v.x));
</script>

<template>
  <v-slider v-model="v.x" />
</template>

# Local variables

For local variables, we use two new components syntaxes introduced in Vue 3: script setup and ref sugar.

First, we create a <script setup> section and set a local variable x.

<script setup>
import { ref } from 'vue'
const x = ref(100)
</script>

Next we use the variable x to control the SVG circle position in x-axis:

<svg width="400" height="20">
  <circle :cx="x" cy="10" r="10" />
</svg>

Now let's add a slider control to adjust the x value:

<v-slider v-model="x" max="400" />
> {{ x }}

100

# Prior art

https://visualia.github.io/visualia_original/#live-variables