Vue - OVERMIND

Search…
Vue
Install
npm install overmind overmind-vue
There are three approaches to connecting Overmind to Vue.
Hooks (experimental)
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>
Accessing state in setup
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>
Scoped tracking
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>
​
Plugin
Vue has a plugin system that allows us to expose Overmind to all components. This allows minimum configuration and you just use state etc. from any component.
overmind/index.js
index.js
components/SomeComponent.vue
export const overmind = {
  state: {
    foo: 'bar'
  },
  actions: {
    onClick() {}
  }
}
import Vue from 'vue/dist/vue'
import { createOvermind } from 'overmind'
import { createPlugin } from 'overmind-vue'
import { config } from './overmind'
​
const overmind = createOvermind(config)
const OvermindPlugin = createPlugin(overmind)
​
Vue.use(OvermindPlugin)
​
...
<template>
  <div @click="actions.onClick">
    {{ state.foo }}
  </div>
</template>
If you rather want to expose state, actions and effects differently you can configure that.
index.js
components/SomeComponent.vue
import Vue from 'vue/dist/vue'
import { createOvermind } from 'overmind'
import { createPlugin } from 'overmind-vue'
import { config } from './overmind'
​
const overmind = createOvermind(config)
const OvermindPlugin = createPlugin(overmind)
​
Vue.use(OvermindPlugin, ({ state, actions, effects }) => ({
  admin: state.admin,
  posts: state.posts,
  actions,
  effects
}))
​
...
<template>
  <div @click="actions.onClick">
    {{ admin.foo }} {{ posts.foo }}
  </div>
</template>
Rendering
Any state accessed in the component will cause the component to render when a mutation occurs on that state. Overmind actually uses the same approach to change detection as Vue itself. When using the plugin any component can access any state, though the only overhead that is added to the application is an instance of a “tracking tree” per component. This might sound scary, but it is a tiny little object that adds a callback function to Overmind as long as the component lives. These tracking trees are even reused as components unmount.
Pass state as props
If you pass anything from the state to a child component it will just work out of the box. The child component will “rescope” the property to its own tracking tree. This ensures that the property you passed is tracked within that component.
components/Todo.vue
components/Todos.vue
<template>
  <li>{{ todo.title }}</li>
</template>
<script>
export default {
  name: 'Todo',
  props: ["todo"]
}
</script>
<template>
  <ul>
    <todo-component
      v-for="post in state.postsList"
      :todo="todo"
      :key="todo.id"
    ></todo-component>
  </ul>
</template>
<script>
import TodoComponent from './Todo'
​
export default {
  name: 'Todo',
  components: {
    TodoComponent
  }
}
</script>
Reactions
To run effects in components based on changes to state you use the reaction function in the lifecycle hooks of Vue.
components/SomeComponent.vue
<template>
  <div @click="overmind.actions.onClick">
    {{ overmind.state.foo }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
export default connect({
  mounted() {
    this.disposeReaction = this.overmind.reaction(
      ({ currentPage }) => currentPage,
      () => document.querySelector('#app').scrollTop = 0
    )
  },
  destroyed() {
    this.disposeReaction()
  }
})
</script>
Connect
If you want more manual control of what components connect to Overmind you can use the connector.
overmind/index.js
components/SomeComponent.vue
import { createOvermind } from 'overmind'
import { createConnect } from 'overmind-vue'
​
const overmind = createOvermind({
  state: {},
  actions: {}
})
​
export const connect = createConnect(overmind)
<template>
  <div @click="overmind.actions.onClick">
    {{ overmind.state.foo }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
const Component = {}
​
export default connect(Component)
</script>
You can also expose parts of the configuration on custom properties of the component:
components/SomeComponent.vue
<template>
  <div @click="actions.someAdminAction">
    {{ state.someAdminState }}
  </div>
</template>
<script>
import { connect } from '../overmind'
​
const Component = {}
​
export default connect(({ state, actions, effects }) => ({
  state: state.admin,
  actions: actions.admin
}), Component)
</script>
You can now access the admin state and actions directly with state and actions.
Computed
Vue has its own observable concept that differs from Overmind. That means you can not use Overmind state inside a computed and expect the computed cache to be busted when the Overmind state changes. But computeds are really for caching expensive computation, which you will rather do inside Overmind using derived anyways.
Using props
You can combine Overmind state with props to dynamically extract state.
components/SomeComponent.vue
<template>
  <div>
    {{ title }}
  </div>
</template>
<script>
export default {
  name: 'SomeComponent',
  props: ["id"],
  data: (self) => ({
    get title() {
      return self.state.titles[self.id]
    }
  })
}
</script>