Creates a Gate to consume data from view, designed for Vue 3. If defaultState is defined, Gate.state will be created with passed value.

since

createGate introduced in effector-vue 21.1.0

Methods

`createGate(config?: {defaultState?, domain?, name?})`

Arguments

config (Object): Optional configuration object

defaultState?: Optional default state for Gate.state
domain? (Domain): Optional domain which will be used to create gate units (Gate.open event, Gate.state store, and so on)
name? (string): Optional name which will be used as the name of a created Vue component

Returns

Gate

Examples

Basic Usage

import { createGate } from "effector-vue/composition";

export const ListGate = createGate<string>({
  name: "Gate with required props",
});

ListGate.state.watch((state) => {
  console.log("current state", state);
});
// => current state null

<script setup lang="ts">
import { useGate } from "effector-vue/composition";

import { ListGate } from "./model";

const props = defineProps<{ id: string }>();

useGate(ListGate, () => props.id);
</script>

<template>
  <div>{{ id }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import ListItem from "./ListItem.vue";

const id = ref("1");
</script>

<template>
  <ListItem :id="id" />
</template>

import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");
// => current state 1

app.unmount();
// => current state null

The gate opens on mount with the props it has at that moment and closes on unmount. useGate describes the order of open and set, the behavior under <KeepAlive> and on the server.