Vue
npm install overmind overmind-vue
There are three approaches to connecting Overmind to Vue.
JavaScript
TypeScript
// overmind/index.js
import {
createStateHook,
createActionsHook,
createEffectsHook,
createReactionHook
} from 'overmind-vue/vue3'
export const config = {
state: {
foo: 'bar'
},
actions: {
onClick() {}
},
effects: {}
}
export const hooks = {
state: createStateHook(),
actions: createActionsHook(),
effects: createEffectsHook(),
reaction: createReactionHook()
}
// index.js
import { createOvermind } from 'overmind'
import { withOvermind } from 'overmind-vue/vue3'
import { config } from './overmind'
import App from './App.vue'
const overmind = createOvermind(config)
createApp(withOvermind(overmind, App)).mount('#app')
...
// components/SomeComponent.vue
<template>
<div @click="actions.onClick">
{{ state.foo }}
</div>
</template>
<script>
import { hooks } from '../overmind'
export default {
setup() {
const state = hooks.state()
const actions = hooks.actions()
return { state, actions }
}
}
</script>
// overmind/index.ts
import { IContext } from 'overmind'
import {
createStateHook,
createActionsHook,
createEffectsHook,
createReactionHook
} from 'overmind-vue/vue3'
import { state } from './state'
import * as actions from './actions'
export const config = {
state,
actions
}
export type Context = IContext<typeof config>
export const hooks = {
state: createStateHook<Context>(),
actions: createActionsHook<Context>(),
effects: createEffectsHook<Context>(),
reaction: createReactionHook<Context>()
}
// index.ts
import { createOvermind } from 'overmind'
import { withOvermind } from 'overmind-vue/vue3'
import { config } from './overmind'
import App from './App.vue'
const overmind = createOvermind(config)
createApp(withOvermind(overmind, App)).mount('#app')
...
// components/SomeComponent.vue
<template>
<div @click="actions.onClick">
{{ state.foo }}
</div>
</template>
<script>
import { hooks } from '../overmind'
export default {
setup() {
const state = hooks.state()
const actions = hooks.actions()
return { state, actions }
}
}
</script>
You have to point to
.value
to access state from the hook with setup.components/SomeComponent.vue
<script>
import { hooks } from '../overmind'
export default {
setup() {
const state = hooks.state()
const actions = hooks.actions()
return {
foo: state.value.foo,
actions
}
// JSX
return () => (
<div onClick={actions.onClick}>{state.value.foo}</div>
)
}
}
</script>
You can scope the tracking to specific state. In this example we only track changes to the properties accessed on the item within the template. Any changes to the items state itself does not affect this component, like adding/removing items.
components/SomeComponent.vue
<template>
<div @click="actions.onClick">
{{ item.title }}
</div>
</template>
<script>
import { hooks } from '../overmind'
export default {
props: ['id'],
setup() {
const item = hooks.state(state => state.items[this.id])
const actions = hooks.actions()
return { item, actions }
}
}
</script>