| URI | helper://{**path} |
|---|---|
| Path | Specify the provide key for the Nuxt plugins Helper. |
| Example | helper://exampleHelper |
ViewState
Providing Helpers
Use this when you want to describe a state that cannot be represented by other StateSources or when you want to associate multiple StateSources.
Register Nuxt plugins .
tsplugins/exampleState.ts
export default defineNuxtPlugin(() => {
return {
provide: {
exampleState: () => {
//
const model = ref({ key1: 'example1', key2: 'example2' });
const status = ref(200);
//
const data = computed({
get() {
return model.value;
},
set(value) {
if (value && value.key1) {
status.value = 200;
}
else {
status.value = 400;
}
model.value = value;
},
});
// Return
// data: Ref<any>
// status: Ref<number>
return {
data,
status,
};
},
},
};
});
Retrieve and Update
200
{
"key1": "example1",
"key2": "example2"
}
vue
<template>
<ViewState
v-slot="example"
src="helper://exampleState"
>
<b-input
:state-src="example"
state-path="key1"
/>
<b-input
:state-src="example"
state-path="key2"
/>
<div>{{ example.status }}</div>
<div>{{ example.data }}</div>
</ViewState>
</template>
ActionState
You can register actions to be executed on the client side.
Providing Helpers
tsplugins/exampleAction.ts
export default defineNuxtPlugin(() => {
return {
provide: {
// Return: Promise<void>
exampleAction: async (props: IActionStateHelperProps) => {
//
if (!props.data.value) {
props.data.value = 0;
}
switch (props.method) {
case 'up':
props.data.value = props.data.value + props.params;
break;
case 'down':
props.data.value = props.data.value - props.params;
break;
default:
props.status.value = 400;
return;
}
// to default template
props.status.value = 0;
//
await nextTick();
},
},
};
});
Action
vue
<template>
<ActionState src="helper://exampleAction">
<template #default="{ action, data }">
<b-button
color="primary"
@click="action('up', 10)"
>
Count Up
</b-button>
<b-button
color="primary"
@click="action('down', 10)"
>
Count Down
</b-button>
<div>
{{ data }}
</div>
</template>
<template #fallback>
<Spinner
spinner="grow"
sm
aria-hidden="true"
/>
Loading...
</template>
<template #complete="{ data, status }">
<div>
ErrorMessages: {{ status }} {{ data }}
</div>
</template>
</ActionState>
</template>