Skip to main content

createGate

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

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

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 name of created react component

Returns

Gate

Example

import {createGate, useGate} from 'effector-vue/composition'

const ListGate = createGate({
name: 'Gate with required props',
})

const ListItem = {
template: `
<div>
{{id}}
</div>
`,
props: {
id: {
type: String,
required: true,
},
},
setup(props) {
useGate(ListGate, () => props.id)
},
}

const app = {
template: `
<div>
<ListItem :id="id" />
</div>
`,
components: {
ListItem,
},
setup() {
const id = ref('1')
return {id}
},
}

Gate.state.watch(state => {
console.log('current state', state)
})
// => current state null

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

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