This action tag is used to update the state’s value within Custom Element or
<custom-element name="set-state-demo">
<element-state name="state" type="string"></element-state>
<element-flow>
<trigger-event click="StaticBtn">
<set-state name="state" value="Hello World!"></set-state>
</trigger-event>
<trigger-event click="DynamicBtn">
<set-state
name="state"
value="$.data-state"
from="event:attr"></set-state>
</trigger-event>
<trigger-event input="DynamicInput">
<set-state name="state" value="$.target.value" from="event"></set-state>
</trigger-event>
</element-flow>
<template>
<div>
State:
<slot name="#state"></slot>
</div>
<button ref="StaticBtn">Update static value!</button>
<button data-state="Universe!" ref="DynamicBtn">
Update dynamic value!
</button>
<div><input ref="DynamicInput" /></div>
</template>
</custom-element>
<custom-element name="set-state-array-demo">
<element-state name="array" type="array"></element-state>
<element-flow>
<trigger-event click="PushBtn">
<set-state
name="array"
value='[{ "item": "Hello World" }]'
mutate="push"></set-state>
</trigger-event>
<trigger-event click="PopBtn">
<set-state name="array" mutate="pop"></set-state>
</trigger-event>
<trigger-event click="AssignBtn">
<set-state
name="array"
value='[{ "item": "Hello Universe" }]'
index="0"
mutate="assign"></set-state>
</trigger-event>
<trigger-event click="RemoveBtn">
<set-state name="array" index="2" mutate="remove"></set-state>
</trigger-event>
</element-flow>
<template>
<div>
Array State:
<slot name="#array"></slot>
</div>
<button ref="PushBtn">Push!</button>
<button ref="PopBtn">Pop!</button>
<button ref="AssignBtn">Assign!</button>
<button ref="RemoveBtn">Remove!</button>
</template>
</custom-element>